import Link from "next/link";

import { ProductGrid } from "@/components/products/ProductGrid";
import type { Product } from "@/types/product";

export function FeaturedProducts({ products }: { products: Product[] }) {
  if (products.length === 0) return null;

  return (
    <section aria-labelledby="featured-heading">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h2 id="featured-heading" className="text-2xl font-bold tracking-tight text-slate-900">
            Featured products
          </h2>
          <p className="mt-1 text-sm text-slate-600">Highest rated in the sample catalogue.</p>
        </div>
        <Link
          href="/products?sort=rating-desc"
          className="text-sm font-semibold text-indigo-700 hover:text-indigo-900 focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:outline-none"
        >
          See all top rated →
        </Link>
      </div>

      <div className="mt-6">
        <ProductGrid products={products} />
      </div>
    </section>
  );
}