"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { ProductCard } from "@/components/product-card";

const featuredProducts = [
  {
    id: "1",
    name: "Modern Velvet Sofa",
    price: 899,
    originalPrice: 1299,
    image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=600&q=80",
    category: "Living Room",
    isSale: true,
  },
  {
    id: "2",
    name: "Scandinavian Dining Table",
    price: 649,
    image: "https://images.unsplash.com/photo-1617806118233-18e1de247200?w=600&q=80",
    category: "Dining Room",
    isNew: true,
  },
  {
    id: "3",
    name: "Luxury King Bed Frame",
    price: 1199,
    originalPrice: 1499,
    image: "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=600&q=80",
    category: "Bedroom",
    isSale: true,
  },
  {
    id: "4",
    name: "Ergonomic Office Chair",
    price: 349,
    image: "https://images.unsplash.com/photo-1580480055273-228ff5388ef8?w=600&q=80",
    category: "Office",
    isNew: true,
  },
];

export function FeaturedProducts() {
  return (
    <section className="py-20 bg-neutral-50 dark:bg-neutral-900/50">
      <Container>
        <div className="text-center mb-12">
          <Heading>Featured Products</Heading>
          <Subheading className="mt-4">
            Handpicked favorites from our latest collection
          </Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {featuredProducts.map((product) => (
            <ProductCard key={product.id} {...product} />
          ))}
        </div>
      </Container>
    </section>
  );
}