import { PageHero } from "@/components/page-hero"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { getCardsByCategory, getCategoryBySlug, categories } from "@/data/cards"
import { notFound } from "next/navigation"
import Link from "next/link"

export function generateStaticParams() {
  return categories.map((category) => ({
    slug: category.slug,
  }))
}

export default function CategoryPage({ params }: { params: { slug: string } }) {
  const category = getCategoryBySlug(params.slug)

  if (!category) {
    notFound()
  }

  const categoryCards = getCardsByCategory(params.slug)

  return (
    <>
      <PageHero
        title={category.name}
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Our Cards", href: "/our-cards" },
        ]}
      />

      <main className="flex-1">
        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <p className="text-lg text-muted-foreground max-w-3xl mx-auto">{category.description}</p>
              <p className="text-sm text-muted-foreground mt-4">
                {categoryCards.length} {categoryCards.length === 1 ? "design" : "designs"} available
              </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {categoryCards.map((card) => (
                <Link key={card.id} href={`/card/${card.id}`}>
                  <Card className="h-full hover:shadow-lg transition-shadow group cursor-pointer">
                    <CardContent className="p-0">
                      <div className="aspect-[3/4] relative overflow-hidden rounded-t-lg bg-muted">
                        <img
                          src={card.image || "/placeholder.svg"}
                          alt={card.name}
                          className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
                        />
                      </div>
                      <div className="p-4">
                        <div className="flex items-start justify-between gap-2 mb-2">
                          <h3 className="text-lg font-semibold leading-tight">{card.name}</h3>
                          {card.price > 0 ? (
                            <Badge variant="secondary" className="shrink-0">
                              ${card.price.toFixed(2)}
                            </Badge>
                          ) : (
                            <Badge variant="outline" className="shrink-0">
                              Inquire
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground mb-2">Order Code: {card.orderCode}</p>
                        {card.description && (
                          <p className="text-xs text-muted-foreground mt-2 italic">{card.description}</p>
                        )}
                        {card.variants && card.variants.length > 0 && (
                          <p className="text-xs text-muted-foreground mt-2">
                            Also available: {card.variants.join(", ")}
                          </p>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        </section>
      </main>
    </>
  )
}