import { Card } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import Image from 'next/image'
import React from 'react'
import Car from '@/assets/images/car.png'
import Avatar from '@/assets/icons/avatar.svg'
import { Badge } from 'lucide-react'
import { Button } from '@/components/ui/button'
const CartListCard = () => {
    return (
        <Card className=' bg-white p-5'>
            <div className=' flex flex-row justify-between gap-10'>
                <Checkbox className=' bg-gray-400 border-none w-7 h-7 relative top-0 ml-2 data-[state=checked]:bg-black data-[state=checked]:text-white' />
                <div className='flex flex-row flex-wrap md:flex-nowrap gap-10'>
                    <div className=''>
                        <Image className='rounded-md' src={Car} width={120} height={120} alt='' />
                    </div>
                    <div className=''>
                        <h1 className=' text-black font-bold text-lg'>Ford Black 33</h1>
                        <span className=' text-stone-600 text-sm'>
                            Make: Ford   |  Model: Heighten Exhilaration   |  Year: 1978 | Media Type: JPEG |  Resolution: 3872 x 2592 px (12.91X8.64 in) 300dpi
                        </span>
                        <div className=' flex flex-row gap-1 items-center mt-2'>
                            <Image width={30} height={30} src={Avatar} alt='' className=' rounded-full' />
                            <span className=' text-black text-sm font-semibold'>Italo</span>
                            <div className=' w-2 h-2 bg-green-500 rounded-full relative right-0.5 -top-0.5' />
                        </div>
                    </div>
                </div>
                <div className=' flex flex-col justify-between h-full gap-8'>
                    <h1 className=' text-black font-black text-lg'>50.00$</h1>
                    <Button>
                        Delete
                    </Button>
                </div>
            </div>
        </Card>
    )
}

export default CartListCard