import React from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
import avatar from '@/assets/images/car.png'
import Image from 'next/image'
import { ArrowLeft, Paperclip, Send, Smile } from 'lucide-react'
import Link from 'next/link'
import { Input } from '../ui/input'

const Chatbox = () => {
    return (
        <Card className='md:basis-3/4 !bg-white rounded-lg flex flex-col text-black h-[70vh]'>
            <CardHeader className='shadow flex flex-row justify-between items-center py-3' >
                <div className='flex items-center space-x-3'>
                    <Link href='/dashboard/chats'>
                        <ArrowLeft className='size-5' />
                    </Link>
                    <div className='flex items-center w-full space-x-2'>
                        <Image src={avatar} className='size-8 rounded-full' alt='' />
                        <div>
                            <p className='text-sm'>Italo Melos</p>
                            <p className='text-xs text-primary'>Active Now</p>
                        </div>
                    </div>
                </div>
            </CardHeader>
            <CardContent className='grow overflow-scroll pt-2 min-h-96 h-max'>
            </CardContent>
            <CardFooter className='flex items-center p-3 space-x-2 border-t h-fit border-gray-200'>
                <Input placeholder='Type your message' className='border-gray-300 rounded-full' />
                <Button variant='link' className='size-8 rounded-full bg-gray-200 border-gray-300 p-2'><Paperclip className='size-4 text-black' /></Button>
                <Button variant='link' className='size-8 rounded-full bg-gray-200 border-gray-300 p-2'><Smile className='size-4' stroke='gray' fill='gold' /></Button>
                <Button className='size-8 rounded-full p-2'><Send className='size-5' /></Button>
            </CardFooter>
        </Card>
    )
}

export default Chatbox