import Image from 'next/image'
import * as React from 'react'

import {cards} from '@/lib/data'
import {Card, CardContent} from '@/ui/card'
import {Carousel, CarouselContent, CarouselItem} from '@/ui/carousel'

export default function FeatureCards() {
	return (
		<Carousel className='mx-auto w-full'>
			<CarouselContent className='-ml-2 md:-ml-4'>
				{cards.map((card: any) => (
					<CarouselItem
						key={card.title}
						className='pl-3 md:basis-1/3 lg:basis-1/4 xl:basis-1/5'
					>
						<div className='p-1'>
							<Card className='border-[2px] border-brand-violet'>
								<CardContent className='aspect-card flex items-center justify-center p-1'>
									<CarouselItem>
										<Image
											src={card.image}
											width={256}
											height={256}
											className='object-scale-down'
											priority
											alt={''}
										/>
									</CarouselItem>
								</CardContent>
							</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>*/
	)
}