import Image from 'next/image'

import CardBuyButton from '@/components/shared/store/card-buy-button'
import RateStars from '@/components/shared/store/stars'
import {Link} from '@/i18n/routing'
import {Card, CardContent, CardFooter} from '@/ui/card'

export default function FeatureCard({card}: {card: any}) {
	return (
		<Card className='relative aspect-card overflow-hidden border-[2px] border-brand-violet transition duration-300 hover:shadow-lg hover:shadow-brand-violet/50'>
			<Link href={`/product/${card.productId}-${card.slug}`}>
				<CardContent className='relative flex h-[76%] flex-col justify-between overflow-hidden pt-4'>
					<Image
						className='transition duration-300 hover:scale-110'
						src={card.image}
						width={card.imageWidth}
						height={card.imageHeight}
						/*className='object-scale-down'*/
						priority
						alt={''}
						sizes='100vw'
						style={{
							objectFit: 'contain',
							width: '100%',
							height: 'calc(100% - 24px)'
						}}
					/>
					<RateStars />
				</CardContent>
			</Link>
			<div className='bw-card-footer flex h-[24%] items-center justify-between border-t-[2px] border-brand-violet px-1'>
				<div className=''>
					<p className='font-heading ml-1 border-b border-b-brand-violet pb-0.5 pl-1 pr-3'>
						{card.title}
					</p>
					<p className='pl-2 text-[18px] font-bold text-brand-violet'>
						{parseFloat(card.price).toFixed(2)}
					</p>
				</div>
				<CardBuyButton
					item={{
						id: card.productId,
						quantity: 1,
						title: card.title,
						price: parseFloat(card.price).toFixed(2),
						image: card.image
					}}
				/>
			</div>
		</Card>
	)
}

// id: number
// quantity: number
// title: string
// price: string | any
// image?: string | null
// imageWidth?: number | null
// imageHeight?: number | null