import { Download, ExternalLink } from "lucide-react";
import { ICONE_DO_FORMATO, nomeDoFormato, type Gabarito } from "@/lib/gabaritos-do-produto";

/*
  O gabarito para baixar, no desenho da Boutique.

  Na referência, logo acima do "Adicionar ao carrinho", fica o botão
  "Tabela de medidas" (borda #CECECE, 48 px, texto 12 #4B4F58). Para quem
  imprime, o equivalente é o gabarito: o mesmo botão, um por formato, direto
  (sem menu) — quem vai montar a arte já sabe o programa que usa. O Canva
  abre em outra aba; os outros baixam o arquivo. Os gabaritos vêm da aba
  Produção do editor do produto.
*/

export function BoutiqueGabarito({ gabaritos }: { gabaritos: Gabarito[] }) {
  if (!gabaritos.length) return null;
  return (
    <section>
      <p className="bq-rotulo">Utilize o gabarito:</p>
      <div className="mt-2 flex flex-wrap gap-2">
        {gabaritos.map((gabarito) => {
          const canva = gabarito.formato === "canva";
          return (
            <a
              key={gabarito.formato}
              href={gabarito.url}
              target="_blank"
              rel="noreferrer"
              download={canva ? undefined : true}
              className="inline-flex h-12 items-center gap-2.5 border bg-white px-3 text-[12px] text-[#4b4f58] transition-colors hover:border-black hover:text-black"
              style={{ borderColor: "#cecece" }}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={ICONE_DO_FORMATO[gabarito.formato]} alt="" className="h-6 w-6 shrink-0 object-contain" />
              {nomeDoFormato(gabarito.formato)}
              {canva ? (
                <ExternalLink className="h-3.5 w-3.5 shrink-0" strokeWidth={1.6} aria-label="abre em outra aba" />
              ) : (
                <Download className="h-3.5 w-3.5 shrink-0" strokeWidth={1.6} aria-label="baixar" />
              )}
            </a>
          );
        })}
      </div>
    </section>
  );
}