"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardContent } from "@/components/ui/card";
import { BlurImage } from "@/components/blur-image";
import Link from "next/link";

const categories = [
  {
    name: "Living Room",
    image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=600&q=80",
    count: 120,
  },
  {
    name: "Bedroom",
    image: "https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?w=600&q=80",
    count: 95,
  },
  {
    name: "Dining Room",
    image: "https://images.unsplash.com/photo-1617806118233-18e1de247200?w=600&q=80",
    count: 78,
  },
  {
    name: "Office",
    image: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80",
    count: 65,
  },
  {
    name: "Outdoor",
    image: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80",
    count: 42,
  },
  {
    name: "Storage",
    image: "https://images.unsplash.com/photo-1595428774223-ef52624120d2?w=600&q=80",
    count: 58,
  },
];

export function Categories() {
  return (
    <section className="py-20">
      <Container>
        <div className="text-center mb-12">
          <Heading>Shop by Category</Heading>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
          {categories.map((category) => (
            <Link key={category.name} href={`/categories/${category.name.toLowerCase().replace(" ", "-")}`}>
              <Card className="group cursor-pointer hover:shadow-lg transition-all duration-300">
                <CardContent className="p-0">
                  <div className="relative h-40 overflow-hidden rounded-t-lg">
                    <BlurImage
                      src={category.image}
                      alt={category.name}
                      fill
                      className="object-cover group-hover:scale-110 transition-transform duration-300"
                    />
                  </div>
                  <div className="p-4 text-center">
                    <h3 className="font-semibold text-sm mb-1">{category.name}</h3>
                    <p className="text-xs text-neutral-500">{category.count} items</p>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </Container>
    </section>
  );
}