import type { GetServerSideProps, NextPage } from 'next';
import Link from 'next/link';
import Seo from '../../components/Seo';
import Breadcrumbs, { breadcrumbsJsonLd } from '../../components/Breadcrumbs';
import { SITE_URL } from '../../lib/seo';
import { fetchFromApi } from '../../lib/serverFetch';

interface Brand {
  id: number;
  name: string;
  slug: string;
}

interface BrandsIndexProps {
  brands: Brand[];
}

const BrandsIndex: NextPage<BrandsIndexProps> = ({ brands }) => {
  return (
    <>
      <Seo
        title="Značky parfémů | Celé parfémy | Vystříkejto.cz"
        description="Objevte celé parfémy podle značky. Originální vůně od niche i klasických parfumérských domů."
        canonical={`${SITE_URL}/brands`}
        jsonLd={breadcrumbsJsonLd([
          { name: 'Domů', href: '/' },
          { name: 'Značky' },
        ])}
      />
      <section className="w-full bg-luxury-dark px-4 pb-20 pt-28 sm:px-6 lg:px-[5vw] lg:pb-24 lg:pt-36">
        <div className="mx-auto max-w-[1600px]">
          <Breadcrumbs items={[{ name: 'Domů', href: '/' }, { name: 'Značky' }]} />
          <header className="mb-10">
            <p className="mb-2 text-xs font-bold uppercase tracking-[0.18em] text-luxury-gold">
              Celé parfémy
            </p>
            <h1 className="text-4xl font-black tracking-[-0.035em] text-luxury-light sm:text-5xl lg:text-6xl">
              Značky
            </h1>
          </header>

          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-4 gap-y-3 md:gap-x-8 md:gap-y-4">
            {brands.map((brand) => (
              <Link
                key={brand.id}
                href={`/brands/${brand.slug}`}
                className="text-sm md:text-base font-aptos font-bold uppercase text-luxury-light hover:text-luxury-gold transition-colors py-1"
              >
                {brand.name}
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

export const getServerSideProps: GetServerSideProps<BrandsIndexProps> = async ({ req }) => {
  const brands = await fetchFromApi<Brand[]>(req, '/api/brands');
  return {
    props: {
      brands: brands || [],
    },
  };
};

export default BrandsIndex;