"use client";
import productsData from "@/resources/productsData";
import { Button } from "@nextui-org/button";
import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
export default function Home() {
return (
<main>
<section>
<div className="container pb-5 gap-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{productsData.map((item, index) => (
<Card
shadow="md"
key={index}
isPressable
onPress={() => console.log("item pressed")}
className="border border-[#444]"
>
<CardBody className="overflow-visible p-0">
<Image
shadow="sm"
radius="lg"
width="100%"
alt={item.title}
className="w-full object-cover h-[240px]"
src={item.img}
/>
</CardBody>
<CardFooter className="w-full gap-3 flex flex-col items-end">
<div className="text-large mt-1 flex justify-between w-full">
<b>{item.title}</b>
<p className="text-default-600">${item.price}</p>
</div>
<div className="flex justify-between items-center w-full">
<p>{item.quantity} Sold Out</p>
<Button
size="md"
color="success"
radius="sm"
className="font-medium"
>
Add to cart
</Button>
</div>
</CardFooter>
</Card>
))}
</div>
</section>
</main>
);
}