import { usePackagesQuery } from '../hooks/usePackagesQuery';
import { PackageCard } from './PackageCard';
import { PackageCardSkeleton } from './PackageCardSkeleton';

// Matches the fixed number of packages (see content.ts) so the skeleton grid has the
// same shape as the loaded grid — no layout shift once the real cards arrive.
const SKELETON_COUNT = 3;

export function PackagesSection() {
  const { data: packages, isLoading, isError } = usePackagesQuery();

  return (
    <section
      id="pakketten"
      className="bg-gradient-to-b from-transparent via-surface/50 to-transparent py-[88px]"
    >
      <div className="mx-auto max-w-[1080px] px-6">
        <div className="mb-[52px]">
          <span className="font-mono block text-sm uppercase tracking-wider text-accent">
            // pakketten
          </span>
          <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
            Drie manieren om te starten
          </h2>
          <p className="mt-3 max-w-[56ch] text-muted">
            Van één sterke pagina tot volledig maatwerk met eigen back-end. Elk pakket heeft een
            vaste scope en een vaste prijs.
          </p>
        </div>
        <div className="grid grid-cols-1 gap-[22px] sm:grid-cols-3" data-testid="packages-grid">
          {isError ? (
            <p className="col-span-full text-center text-muted" data-testid="packages-error">
              Pakketten konden niet worden geladen. Probeer het later opnieuw.
            </p>
          ) : isLoading || !packages ? (
            Array.from({ length: SKELETON_COUNT }, (_, i) => <PackageCardSkeleton key={i} />)
          ) : (
            packages.map((pkg) => <PackageCard key={pkg.id} pkg={pkg} />)
          )}
        </div>
      </div>
    </section>
  );
}