import Image from "next/image";
import type { ImageCard } from "@/types/yapaylisans";
import { yapaylisansProducts, giftCards, popularProducts } from "@/data/yapaylisans";

interface SectionHeadingProps {
  title: string;
  description: string;
}

function SectionHeading({ title, description }: SectionHeadingProps) {
  return (
    <div className="section-heading">
      <div className="heading-line"><h2>{title}</h2><span /></div>
      <p>{description}</p>
    </div>
  );
}

function ProductGrid({ products }: { products: ImageCard[] }) {
  return (
    <div className="product-grid">
      {products.map((product) => (
        <a className="product-card" href={product.href} key={product.image}>
          <Image src={product.image} alt={product.title} width={374} height={250} sizes="(max-width: 767px) 50vw, 285px" />
        </a>
      ))}
    </div>
  );
}

export function ProductSections() {
  return (
    <>
      <section className="content-section popular-section">
        <SectionHeading title="Popüler Ürünler" description="Tüm zamanların en popüler oyunlarının ürünlerini her zaman en iyi fiyata satın alın!" />
        <ProductGrid products={popularProducts} />
      </section>
      <section className="content-section yapaylisans-section">
        <SectionHeading title="Yapaylisans.com" description="UC, VP, RP, Elmas ve daha fazlasını en uygun fiyata satın alın!" />
        <ProductGrid products={yapaylisansProducts} />
      </section>
      <section className="content-section gift-section">
        <SectionHeading title="Hediye Kartları" description="En iyi fiyata dijital hediye kartları, eğlence hizmetleri ve online alışveriş yapmak için satın alın!" />
        <ProductGrid products={giftCards} />
      </section>
    </>
  );
}