import React, { useState } from 'react'
import { Card, CardContent } from '@/components/ui/card'
import Image from 'next/image'
import CarImage from '@/assets/images/car.png'
import Avatar from '@/assets/icons/avatar.svg'
import { Button } from '@/components/ui/button'
import { Heart, ShoppingCart } from 'lucide-react'
import Link from 'next/link'

const ProductCard = ({ key }: { key: number }) => {
    const [liked, setLiked] = useState(false)
    return (
        <Card key={key}>
            <div className='relative'>
                <div className='absolute w-full p-5 flex items-center justify-between'>
                    <div className='flex items-center gap-5'>
                        <Image src={Avatar} width={50} height={50} alt='' />
                        <span className='text-sm'>Italo Melo</span>
                    </div>
                    <Button
                        onClick={() => setLiked(!liked)}
                        variant='link'
                        className={`${liked ? 'primary' : 'bg-white'} border border-white p-1 w-8 h-8`}>
                        <Heart
                            className='w-5 h-5'
                            fill={liked ? 'white' : 'red'}
                            strokeWidth={0} />
                    </Button>
                </div>
                <Image src={CarImage} width={400} height={400} alt='' className='object-cover w-full max-h-96' />
            </div>
            <CardContent className='bg-white rounded flex justify-between items-center py-2 '>
                <Link href='/products/asdf'>
                    <h4 className='text-sm bold text-black lg:text-xl font-bold mb-3'>Black BMW</h4>
                    <p className='text-xs text-gray-400'>Tags: A100| Blue | Renault 1300  </p>
                    <p className='text-xs text-gray-400'>Description:  The A110 was powered by...</p>
                </Link>
                <div className='flex justify-end items-center'>
                    <Link href='/checkout/cart' >
                        <Button className='p-1 w-8 h-8'>
                            <ShoppingCart className='w-6 h-6' fill='white' strokeWidth={0} />
                        </Button>
                    </Link>
                </div>
            </CardContent>
        </Card>
    )
}

export default ProductCard