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

/*
  O gabarito para baixar, no desenho do Vendor.

  Um botão por formato, direto (sem menu): quem vai montar a arte já sabe o
  programa que usa, e um clique a menos é um arquivo baixado a mais. 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 VendorGabarito({ gabaritos }: { gabaritos: Gabarito[] }) {
  if (!gabaritos.length) return null;
  return (
    <section className="border p-4" style={{ borderRadius: "var(--vd-radius-lg)", borderColor: "var(--vd-border)" }}>
      <p className="text-sm font-semibold">Utilize o gabarito</p>
      <p className="mt-0.5 text-xs text-[var(--vd-muted-fg)]">Baixe o modelo do programa que você usa e monte a arte no nosso padrão.</p>
      <div className="mt-3 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 items-center gap-2 border bg-white px-3 py-2 text-sm font-medium transition-colors hover:border-[var(--vd-primary)]"
              style={{ borderRadius: "var(--vd-radius-md)", borderColor: "var(--vd-border)" }}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={ICONE_DO_FORMATO[gabarito.formato]} alt="" className="h-5 w-5 shrink-0 object-contain" />
              {nomeDoFormato(gabarito.formato)}
              {canva ? (
                <ExternalLink className="h-3.5 w-3.5 shrink-0 text-[var(--vd-primary)]" aria-label="abre em outra aba" />
              ) : (
                <Download className="h-3.5 w-3.5 shrink-0 text-[var(--vd-primary)]" aria-label="baixar" />
              )}
            </a>
          );
        })}
      </div>
    </section>
  );
}