import Titlebar from '@/components/layout/dashboard/titlebar'
import Chatbox from '@/components/shared/chatbox'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Download, DownloadIcon, Paperclip, UserPlus } from 'lucide-react'
import Image from 'next/image'
import React from 'react'
import file from '@/assets/icons/creatorDashboard/word-file.svg'
import avatar from '@/assets/icons/avatar.svg'
const Page = () => {
    return (
        <div>
            <Titlebar title='Booking Details' back />
            <div className='grid md:grid-cols-2 gap-3'>
                <div>
                    <Card className='bg-white text-black'>
                        <CardHeader className='border-b border-gray-300 p-3'>Booking User ID</CardHeader>
                        <CardContent>
                            <div className='mt-5 p-5 bg-gray-200 rounded-lg'>
                                <div className='flex flex-row gap-5 items-start'>
                                    <Image src={avatar} alt='' className=' rounded-full w-32  object-cover' />
                                    <div className=' flex flex-col gap-1'>
                                        <h1 className=' font-semibold text-xl'>Itlo Melo</h1>
                                        <div className=' text-sm font-medium flex flex-row gap-8'>
                                            <span className=' font-medium text-sm '>cindyB@gmail.com</span>
                                            <UserPlus size={18} color='black' />
                                            320
                                        </div>
                                        <div className=' flex flex-row justify-between items-end'>
                                            <p className='text-xs'>
                                                Hello, I'm Cindy Bertillon, a passionate artist and photographer
                                                specializing in the captivating world of car photography.
                                            </p>
                                            <Button className='p-1 px-4 h-fit text-xs'>View Profile</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='mt-5 p-5 bg-gray-200 rounded-lg'>
                                <div className='flex flex-row gap-5 items-start'>
                                    <Image src={avatar} alt='' className=' rounded-full w-32  object-cover' />
                                    <div className=' flex flex-col gap-1'>
                                        <h1 className=' font-semibold text-xl'>Itlo Melo</h1>
                                        <div className=' text-sm font-medium flex flex-row gap-8'>
                                            <span className=' font-medium text-sm '>cindyB@gmail.com</span>
                                            <UserPlus size={18} color='black' />
                                            320
                                        </div>
                                        <div className=' flex flex-row justify-between items-end'>
                                            <p className='text-xs'>
                                                Hello, I'm Cindy Bertillon, a passionate artist and photographer
                                                specializing in the captivating world of car photography.
                                            </p>
                                            <Button className='p-1 px-4 h-fit text-xs'>View Profile</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h1 className='font-semibold text-xl my-3'>Attachments</h1>
                            <div className='grid gap-5'>
                                {
                                    [1, 1, 1, 1, 1].map(() => (
                                        <div className=' p-5 bg-gray-200 rounded-lg'>
                                            <div className=' flex flex-row items-start gap-5'>
                                                <Image src={file} alt='' />
                                                <div className=' flex flex-col gap-1 grow'>
                                                    <div className=' flex flex-row gap-1 items-center text-sm'>
                                                        <h1 className=' font-semibold '>lOREM IPSUM LOREM </h1>
                                                        <span>| DATE: 12/23  |</span>
                                                        <span>TIME: 03:23 Pm </span>
                                                    </div>
                                                    <div className=' flex flex-row gap-1 text-sm'>
                                                        <Paperclip size={16} /> File: JPEG 14,
                                                    </div>
                                                </div>
                                                <div className=' flex flex-col items-center justify-center gap-3'>
                                                    <Button className='h-fit p-2'><Download size={12} /></Button>
                                                    <div className='p-1 px-3 bg-green-200 flex justify-center items-center rounded-lg cursor-pointer'>
                                                        <span className='text-sm text-green-600'>Approved</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    ))
                                }
                            </div>
                        </CardContent>
                    </Card>
                </div>
                <div className='space-y-3'>
                    <Card className='overflow-hidden bg-white  text-black py-2'>
                        <CardContent className='space-y-2'>
                            <div className='flex items-center justify-between'>
                                <span>Booking Details</span>
                                <select name="" id="" className='primary rounded-lg p-1 text-white px-2'>
                                    <option value="">pending</option>
                                </select>
                            </div>
                            <div className='flex items-center justify-between'>
                                <span>ID # 235235</span>
                                <span className='text-primary'>$25.00 </span>
                            </div>
                            <div className='text-sm text-gray-400 leading-relaxed'>
                                <p>Location: Abc street no: 12 California, USA</p>
                                <p>Description : Capture the essence of our Cars. Your artistic skills align with our vision. Excited to collaborate!</p>
                            </div>
                        </CardContent>
                    </Card>
                    <Chatbox />
                </div>
            </div>
        </div>
    )
}

export default Page