import Link from "next/link";
import Container from "./Container";
import ProductCard from "./ProductCard";
import { products } from "@/data/products";

export default function Products() {
  const featured = products.slice(0, 8);

  return (
    <section id="products" className="py-16 sm:py-20">
      <Container>
        <div className="flex items-end justify-between flex-wrap gap-4">
          <h2 className="text-3xl sm:text-4xl font-extrabold text-primary">
            محصولات جدید
          </h2>
          <Link
            href="/products"
            className="flex items-center gap-2 text-primary font-semibold hover:text-primary-dark transition-colors"
          >
            مشاهده بیشتر
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="rotate-180">
              <path
                d="M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 1 1-1.4-1.4L18 12.7H4a1 1 0 1 1 0-2h14L13.3 6.7a1 1 0 0 1 0-1.4Z"
                fill="currentColor"
              />
            </svg>
          </Link>
        </div>

        <div className="mt-10 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-5 sm:gap-6">
          {featured.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </Container>
    </section>
  );
}
