import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { prisma } from "@/lib/prisma";
import ProductCard from "@/components/shop/ProductCard";

export default async function FeaturedProducts() {
  const products = await prisma.product.findMany({
    where: { featured: true, active: true },
    take: 8,
    orderBy: { createdAt: "desc" },
  });

  return (
    <section className="py-20 bg-sage-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4">
          <div>
            <div className="section-badge">Featured</div>
            <h2 className="section-title">Everything Your Pet Needs</h2>
            <p className="section-subtitle max-w-xl">
              Handpicked top products trusted by thousands of pet owners across America.
            </p>
          </div>
          <Link href="/shop" className="btn-outline shrink-0">
            View All Products
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </div>
    </section>
  );
}