import HoverPrefetchLink from "./HoverPrefetchLink";

export type ClientLink = { id: string; name: string };

/**
 * Faixa "Já entregue para" do hero: só projetos de cliente (lib/proof.ts), cada um levando ao próprio case, e na
 * mesma linha os anos de experiência (calculados em app/page.tsx). Sem clientes e sem anos, nada é desenhado.
 * Os links têm 44 px de altura de toque; a rota só é pré-carregada quando a pessoa chega no link.
 */
export default function ClientStrip({
  clients = [],
  years,
  className = "",
}: {
  clients?: ClientLink[];
  /** Anos de experiência, na mesma linha dos clientes. */
  years?: number;
  className?: string;
}) {
  if (clients.length === 0 && !years) return null;

  return (
    <div
      className={`flex flex-wrap items-center gap-x-sp-3 gap-y-sp-1 font-display text-[15px] leading-6 text-[rgba(244,242,237,.64)] ${className}`.trim()}
    >
      {clients.length > 0 && (
        <>
          <p>Já entregue para:</p>
          <ul className="flex flex-wrap items-center gap-x-sp-3">
            {clients.map((client, index) => (
              <li key={client.id} className="flex items-center gap-x-sp-3">
                <HoverPrefetchLink
                  href={`/cases/${client.id}`}
                  className="inline-flex min-h-11 items-center font-medium text-[#f4f2ed] no-underline underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)]"
                >
                  {client.name}
                </HoverPrefetchLink>
                {/* o ponto fica no fim do item (e do último cliente, quando vêm os anos depois): numa quebra de linha ele nunca abre a linha seguinte */}
                {(index < clients.length - 1 || Boolean(years)) && (
                  <span
                    aria-hidden="true"
                    className="text-[rgba(244,242,237,.4)]"
                  >
                    ·
                  </span>
                )}
              </li>
            ))}
          </ul>
        </>
      )}
      {years ? (
        <p>
          <span className="font-mono font-semibold text-[var(--slash)]">
            {years}
          </span>{" "}
          anos de experiência
        </p>
      ) : null}
    </div>
  );
}