"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { ProductCard } from "@/components/product-card";
import { Footer } from "@/components/footer";
import { Button } from "@/components/ui/button";
import { useState } from "react";

const allProducts = [
  {
    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,
  },
  {
    id: "5",
    name: "Minimalist Coffee Table",
    price: 299,
    image: "https://images.unsplash.com/photo-1532372320572-cda25653a26d?w=600&q=80",
    category: "Living Room",
  },
  {
    id: "6",
    name: "Leather Recliner",
    price: 799,
    originalPrice: 999,
    image: "https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=600&q=80",
    category: "Living Room",
    isSale: true,
  },
  {
    id: "7",
    name: "Oak Bookshelf",
    price: 449,
    image: "https://images.unsplash.com/photo-1594620302200-9a762244a156?w=600&q=80",
    category: "Storage",
    isNew: true,
  },
  {
    id: "8",
    name: "Upholstered Dining Chairs (Set of 4)",
    price: 599,
    image: "https://images.unsplash.com/photo-1503602642458-232111445657?w=600&q=80",
    category: "Dining Room",
  },
  {
    id: "9",
    name: "Platform Bed with Storage",
    price: 899,
    image: "https://images.unsplash.com/photo-1540574163026-643ea20ade25?w=600&q=80",
    category: "Bedroom",
  },
  {
    id: "10",
    name: "Standing Desk",
    price: 549,
    originalPrice: 699,
    image: "https://images.unsplash.com/photo-1595515106969-1ce29566ff1c?w=600&q=80",
    category: "Office",
    isSale: true,
  },
  {
    id: "11",
    name: "Outdoor Patio Set",
    price: 1299,
    image: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80",
    category: "Outdoor",
    isNew: true,
  },
  {
    id: "12",
    name: "Accent Armchair",
    price: 399,
    image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=600&q=80",
    category: "Living Room",
  },
];

const categories = ["All", "Living Room", "Bedroom", "Dining Room", "Office", "Outdoor", "Storage"];

export default function ShopPage() {
  const [selectedCategory, setSelectedCategory] = useState("All");

  const filteredProducts = selectedCategory === "All" 
    ? allProducts 
    : allProducts.filter(p => p.category === selectedCategory);

  return (
    <>
      <section className="py-12 border-b">
        <Container>
          <Heading className="mb-2">Shop All Furniture</Heading>
          <p className="text-neutral-600 dark:text-neutral-400">
            Discover our complete collection of premium furniture
          </p>
        </Container>
      </section>

      <section className="py-12">
        <Container>
          {/* Category Filter */}
          <div className="flex flex-wrap gap-2 mb-8">
            {categories.map((category) => (
              <Button
                key={category}
                variant={selectedCategory === category ? "default" : "outline"}
                onClick={() => setSelectedCategory(category)}
              >
                {category}
              </Button>
            ))}
          </div>

          {/* Products Grid */}
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {filteredProducts.map((product) => (
              <ProductCard key={product.id} {...product} />
            ))}
          </div>

          {/* Load More */}
          <div className="text-center mt-12">
            <Button variant="outline" size="lg">
              Load More Products
            </Button>
          </div>
        </Container>
      </section>

      <Footer />
    </>
  );
}