import FeatureCardFront from '@/components/shared/store/feature-card-front'
import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
import {Carousel, CarouselContent, CarouselItem} from '@/ui/carousel'

export default function FeatureCards({
	items
}: {
	items: CategoryPageSqlSchema[]
}) {
	return (
		<Carousel className='mx-auto w-full'>
			<CarouselContent className='-ml-2 md:-ml-4'>
				{items.map((card: any) => (
					<CarouselItem
						key={card.title}
						className='py-4 pl-3 md:basis-1/3 lg:basis-1/4'
					>
						<div className='p-1'>
							<FeatureCardFront card={card} />
						</div>
					</CarouselItem>
				))}
			</CarouselContent>
		</Carousel>

		/*<div className='container grid grid-cols-1 md:grid-cols-2 md:gap-44 lg:grid-cols-4'>
			{cards.map((card: any) => (
				<ProductCard card={card} key={card.title} />
			))}
		</div>*/
	)
}