import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ShoppingCart } from "lucide-react";

const products = [
  {
    id: 1,
    name: "Sample Product",
    description: "This is a sample product description.",
    price: 1200,
    image: "https://via.placeholder.com/300",
  },
];

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <header className="text-center py-10">
        <h1 className="text-4xl font-bold text-gray-800">My Store</h1>
        <p className="text-gray-600 mt-2">Beautiful modern e-commerce with MUR currency</p>
      </header>

      <main className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
        {products.map((product) => (
          <Card key={product.id} className="rounded-2xl shadow-lg bg-white">
            <img src={product.image} alt={product.name} className="rounded-t-2xl w-full h-64 object-cover" />
            <CardContent className="p-4">
              <h2 className="text-xl font-semibold text-gray-800">{product.name}</h2>
              <p className="text-gray-500 text-sm mt-1">{product.description}</p>
              <div className="flex justify-between items-center mt-4">
                <span className="text-lg font-bold text-gray-800">MUR {product.price}</span>
                <Button className="flex items-center gap-2">
                  <ShoppingCart size={16} /> Add to Cart
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </main>
    </div>
  );
}