import Link from "next/link";

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.
 * Sem clientes, nada é desenhado.
 */
export default function ClientStrip({
  clients = [],
  className = "",
}: {
  clients?: ClientLink[];
  className?: string;
}) {
  if (clients.length === 0) return null;

  return (
    <div
      className={`flex flex-wrap items-baseline gap-x-sp-3 gap-y-sp-1 font-display text-[14px] leading-6 text-[rgba(244,242,237,.64)] sm:text-[15px] ${className}`.trim()}
    >
      <p>Já entregue para:</p>
      <ul className="flex flex-wrap items-baseline gap-x-sp-3">
        {clients.map((client, index) => (
          <li key={client.id} className="flex items-baseline gap-x-sp-3">
            <Link
              href={`/cases/${client.id}`}
              className="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}
            </Link>
            {/* o ponto fica no fim do item: numa quebra de linha ele nunca abre a linha seguinte */}
            {index < clients.length - 1 && (
              <span aria-hidden="true" className="text-[rgba(244,242,237,.4)]">
                ·
              </span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}