import { getProducts } from "@/lib/saleor";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import ProductCard from "@/components/product/ProductCard";
import { ChevronDown } from "lucide-react";

export const metadata = {
  title: "Products - ManoonOils",
  description: "Browse our collection of premium natural oils for hair and skin care.",
};

export default async function ProductsPage() {
  const products = await getProducts("EN");

  return (
    <>
      <Header />
      
      <main className="min-h-screen bg-white">
        {/* Page Header */}
        <div className="pt-[104px]">
          <div className="border-b border-[#e5e5e5]">
            <div className="container py-8 md:py-12">
              <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
                <div>
                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-2 block">Our Collection</span>
                  <h1 className="text-3xl md:text-4xl font-medium">All Products</h1>
                </div>
                
                {/* Sort Dropdown */}
                <div className="flex items-center gap-3">
                  <span className="text-sm text-[#666666]">{products.length} products</span>
                  <div className="relative">
                    <select 
                      className="appearance-none bg-transparent border border-[#e5e5e5] pl-4 pr-10 py-2 text-sm focus:outline-none focus:border-black cursor-pointer"
                      defaultValue="featured"
                    >
                      <option value="featured">Featured</option>
                      <option value="newest">Newest</option>
                      <option value="price-low">Price: Low to High</option>
                      <option value="price-high">Price: High to Low</option>
                    </select>
                    <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none text-[#666666]" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Products Grid */}
          <section className="py-12 md:py-16">
            <div className="container">
              {products.length === 0 ? (
                <div className="text-center py-20">
                  <p className="text-[#666666] mb-4">No products available</p>
                  <p className="text-sm text-[#999999]">Please check back later for new arrivals.</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
                  {products.map((product, index) => (
                    <ProductCard 
                      key={product.id} 
                      product={product} 
                      index={index}
                      locale="EN"
                    />
                  ))}
                </div>
              )}
            </div>
          </section>
        </div>
      </main>
      
      <div className="pt-16">
        <Footer />
      </div>
    </>
  );
}