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 {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
import {Card, CardContent, CardFooter} from '@/ui/card'

export default function FeatureCardFront({
	card
}: {
	card: CategoryPageSqlSchema
}) {
	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'>
					{/*<CarouselItem>*/}
					<Image
						className='transition duration-300 hover:scale-110'
						src={card?.image || ''}
						width={card.imageWidth || 100}
						height={card.imageHeight || 100}
						/*className='object-scale-down'*/
						priority
						alt={''}
						sizes='100vw'
						style={{
							objectFit: 'contain',
							width: '100%',
							height: 'calc(100% - 24px)'
						}}
					/>
					<RateStars />
					{/*</CarouselItem>*/}
				</CardContent>
			</Link>
			<div className='bw-card-footer flex h-[24%] items-center justify-between border-t-[2px] border-brand-violet px-2'>
				<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 as string).toFixed(2)}
					</p>
				</div>
				<CardBuyButton
					item={{
						id: card.productId,
						quantity: 1,
						title: card.title,
						price: parseFloat(card.price as string).toFixed(2)
					}}
					isIcon={false}
				/>
			</div>
		</Card>
	)
}