'use client'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import { Download, HandCoins, Heart, MessageCircleMore, Bookmark, } from 'lucide-react'
import Image from 'next/image'
import React, { useState } from 'react'
import CarImage from '@/assets/images/car-landscape.png'
import CarImagePortrait from '@/assets/images/car.png'
import Verified from '@/assets/icons/verified.svg'
import { Input } from '@/components/ui/input'
function Page() {
    const [isSelect, setIsSelect] = useState('')
    const [show2, setShow2] = useState(false)
    return (
        <main className='p-5 container'>
            <div className='grid md:grid-cols-2 gap-3'>
                <div className=' md:col-span-1'>
                    <Card className='p-0.5 bg-white'>
                        <div className='bg-white rounded-lg border border-white text-gray-400 text-sm '>
                            <Image alt='' className='w-full object-cover max-h-50 rounded-lg' src={CarImage} />
                            <div className=' ml-6 flex w-full items-end justify-end flex-row'>
                                <div className='basis-1/4 -mt-12 p-2'>
                                    <Image src={CarImagePortrait} alt='' className='w-full border rounded-lg border-primary' />
                                </div>
                                <div className='grow relative md:bottom-1 bottom-0 -space-y-1'>
                                    <div className=' flex flex-row gap-1 items-end'>
                                        <h3 className='underline text-black text-lg'>Italo Melos</h3>
                                        <Image className=' size-4 mb-1' src={Verified} alt='' />
                                    </div>
                                    <p>italomelo@gmail.com</p>
                                </div>
                            </div>
                            <div className=" ml-8 flex flex-col gap-3 mb-8 mt-2">
                                <div className="">
                                    <span className="underline text-lg text-black">Bio</span>
                                    <p>
                                        Hello, I"m Cindy Bartillon, a passionate artist and photographer specializing in the captivating world of car photography. With years of experience, I have transformed moments into visual stories, capturing the essence and beauty of automobiles.
                                        If you"re looking to add a unique touch to your events through captivating car photography, feel free to get in touch with me.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </Card>
                </div>
                <div className=' md:col-span-1'>
                    {!show2 ?
                        <Card className='p-5 py-8 bg-white'>
                            <div className='flex justify-center items-center flex-col gap-3'>
                                <h1 className=' text-black font-bold text-2xl'>Donate</h1>
                                <h1 className=' text-gray-600 text-sm'>Please select the amount to donate.</h1>
                                <div className=' flex flex-row justify-between items-center gap-5'>
                                    <button id='1' onClick={() => { setIsSelect("1") }} className={` w-20 h-10 rounded-md ${isSelect == '1' ? 'bg-primary primary text-primary-foreground hover:bg-primary/90' : 'text-gray-600 border border-gray-400'} `}>$1</button>
                                    <button id='10' onClick={() => { setIsSelect("10") }} className={` w-20 h-10 rounded-md ${isSelect == '10' ? 'bg-primary primary text-primary-foreground hover:bg-primary/90' : 'text-gray-600 border border-gray-400'} `}>$10</button>
                                    <button id='25' onClick={() => { setIsSelect("25") }} className={` w-20 h-10 rounded-md ${isSelect == '25' ? 'bg-primary primary text-primary-foreground hover:bg-primary/90' : 'text-gray-600 border border-gray-400'} `}>$25</button>
                                </div>
                                <div className=' flex flex-row justify-between items-center gap-5'>
                                    <button id='45' onClick={() => { setIsSelect("45") }} className={` w-20 h-10 rounded-md ${isSelect == '45' ? 'bg-primary primary text-primary-foreground hover:bg-primary/90' : 'text-gray-600 border border-gray-400'} `}>$45</button>
                                    <button id='75' onClick={() => { setIsSelect("75") }} className={` w-20 h-10 rounded-md ${isSelect == '75' ? 'bg-primary primary text-primary-foreground hover:bg-primary/90' : 'text-gray-600 border border-gray-400'} `}>$75</button>
                                    <button id='100' onClick={() => { setIsSelect("100") }} className={` w-20 h-10 rounded-md ${isSelect == '100' ? 'bg-primary primary text-primary-foreground hover:bg-primary/90' : 'text-gray-600 border border-gray-400'} `}>$100</button>
                                </div>
                                <Input type='number' className='max-w-[280px] !ring-0 border border-gray-300 !ring-offset-0 text-black' placeholder='$ Custom Amount' />
                            </div>
                            <div className=' flex flex-col gap-2 mt-4'>
                                <div className=' flex flex-row justify-between items-center'>
                                    <span className=' text-gray-600 text-lg font-medium'>Amount Donated</span>
                                    <span className=' text-gray-600 text-lg font-medium'>$10</span>
                                </div>
                                <div className=' flex flex-row justify-between items-center'>
                                    <span className=' text-gray-600 text-lg font-medium'>Fees(4.9%)</span>
                                    <span className=' text-gray-600 text-lg font-medium'>$0.49</span>
                                </div>
                                <div className=' flex flex-row justify-between items-center'>
                                    <span className=' text-gray-600 text-lg font-medium'>Total Payment</span>
                                    <span className=' text-gray-600 text-lg font-medium'>$10.49</span>
                                </div>
                                <div className='flex items-center gap-5 mt-2'>
                                    <Checkbox className='rounded-full' />
                                    <div className=' flex flex-col'>
                                        <span className=' text-gray-600 text-md font-semibold'>Make this a monthly donation.</span>
                                        <span className=' text-gray-600 text-sm'>Become a sustaining member of our community.</span>
                                    </div>
                                </div>
                                <Button onClick={() => { isSelect !== '' ? setShow2(true) : null }} className=' w-full mt-4'>
                                    Support with Debit or credit card
                                </Button>
                            </div>
                        </Card>
                        :
                        <Card className='p-5 py-8 bg-white'>
                            <div className='flex justify-center items-center flex-col gap-1'>
                                <h1 className=' text-black font-bold text-3xl'>Pay</h1>
                                <h1 className='text-primary font-bold text-3xl '>${isSelect}</h1>
                                <span className=' text-gray-600 text-lg font-medium'>to chat with creator or join their group.</span>
                                <span className=' text-gray-600 text-sm font-medium text-center'>
                                    Here's a list of basic requirements you might consider for joining your
                                    community chat group:
                                </span>
                            </div>
                            <div className=' max-h-[200px] overflow-y-auto' style={{ scrollbarWidth: 'none' }}>
                                <div className='px-5'>
                                    <h2 className=' text-gray-600 text-sm font-bold'>Respectful Behavior:</h2>
                                    <ul className="list-disc ml-6">
                                        <li className="mb-1 text-gray-600 text-sm font-medium">Members must treat each other with respect and kindness.</li>
                                        <li className="mb-1 text-gray-600 text-sm font-medium">Avoid discriminatory language, offensive content, or harassment.</li>
                                    </ul>
                                </div>
                                <div className='px-5'>
                                    <h2 className='text-gray-600 text-sm font-bold'>Appropriate Content:</h2>
                                    <ul className="list-disc ml-6">
                                        <li className="mb-1 text-gray-600 text-sm font-medium">Share content that is relevant to the group's purpose or topic.</li>
                                        <li className="mb-1 text-gray-600 text-sm font-medium">Avoid sharing spam, advertisements, or unrelated content.</li>
                                    </ul>
                                </div>
                                <div className='px-5'>
                                    <h2 className='text-gray-600 text-sm font-bold'>Active Participation:</h2>
                                    <ul className="list-disc ml-6">
                                        <li className="mb-1 text-gray-600 text-sm font-medium">Encourage members to actively engage in discussions and contribute positively...<span className=' text-primary cursor-pointer'>read more</span></li>
                                    </ul>

                                </div>
                            </div>
                            <div className=' flex flex-col gap-2 mt-4'>
                                <div className='flex items-center gap-5 mt-2'>
                                    <Checkbox className='rounded-full' />
                                    <div className=' flex flex-col'>
                                        <span className=' text-gray-600 text-md font-semibold'>I already read the terms & condition</span>
                                    </div>
                                </div>
                                <Button onClick={() => { setShow2(false) }} className=' w-full mt-4'>
                                    Support with Debit or credit card
                                </Button>
                            </div>
                        </Card>
                    }
                </div>
            </div>
        </main>
    )

}

export default Page