import Image from 'next/image'
import Link from 'next/link'

import {Card, CardContent, CardFooter} from '@/ui/card'

export type CardItem = {
	title: string
	image: string
	href: string
	price: number
}

export default function ProductCard({card}: {card: CardItem}) {
	return (
		<Card key={card.title} className='flex flex-col'>
			<Link key={card.title} href={card.href} className='flex flex-col'>
				<CardContent className='flex-1 p-4'>
					<Image
						src={card.image}
						alt={card.title}
						width={120}
						height={120}
						className='aspect-card mx-auto h-auto max-w-full object-cover'
					/>
				</CardContent>
				<CardFooter>{card.title}</CardFooter>
			</Link>
		</Card>
	)
}