import { notFound } from "next/navigation"
import { categories, getProductsByCategory } from "@/lib/products"
import ProductCard from "@/components/store/product-card"
import Header from "@/components/layout/header"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { ArrowRight } from "lucide-react"

interface CategoryPageProps {
  params: {
    id: string
  }
}

export default function CategoryPage({ params }: CategoryPageProps) {
  const category = categories.find((cat) => cat.id === params.id)
  const products = getProductsByCategory(params.id)

  if (!category) {
    notFound()
  }

  return (
    <div className="min-h-screen bg-[var(--bg-color)]">
      <Header />

      <div className="container mx-auto px-4 py-8">
        {/* Breadcrumb */}
        <nav className="flex items-center gap-2 mb-8 text-sm">
          <Link href="/" className="text-[var(--parg-color)] hover:text-[var(--main-color)]">
            الرئيسية
          </Link>
          <ArrowRight className="w-4 h-4 text-[var(--parg-color)]" />
          <Link href="/store" className="text-[var(--parg-color)] hover:text-[var(--main-color)]">
            المتجر
          </Link>
          <ArrowRight className="w-4 h-4 text-[var(--parg-color)]" />
          <span className="text-[var(--dark-color)] font-medium">{category.name}</span>
        </nav>

        {/* Category Header */}
        <div className="mb-12 text-center">
          <h1 className="text-4xl font-bold text-[var(--dark-color)] mb-4">{category.name}</h1>
          <p className="text-xl text-[var(--parg-color)] max-w-2xl mx-auto">{category.description}</p>
        </div>

        {/* Products Grid */}
        {products.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {products.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        ) : (
          <div className="text-center py-16">
            <p className="text-[var(--parg-color)] text-lg mb-4">لا توجد منتجات في هذه الفئة حالياً</p>
            <Link href="/store">
              <Button className="bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]">
                تصفح فئات أخرى
              </Button>
            </Link>
          </div>
        )}
      </div>
    </div>
  )
}