/* A capa pequena do produto digital nas listas: a foto, ou um quadrado com a
   cor do tipo quando ainda não tem foto. */

const COR_DO_TIPO: Record<string, string> = {
  curso: "linear-gradient(135deg, #F26B1D 0%, #E5484D 100%)",
  arquivos: "linear-gradient(135deg, #F2B33D 0%, #F2994A 100%)",
  link: "linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%)",
  codigo: "linear-gradient(135deg, #10B981 0%, #0E9E70 100%)",
  live: "linear-gradient(135deg, #FF2D46 0%, #C2185B 100%)",
};

const SELO_DO_TIPO: Record<string, string> = {
  curso: "VÍDEO",
  arquivos: "ARQ",
  link: "LINK",
  codigo: "CÓD",
  live: "LIVE",
};

export function CapaDoProduto({ tipo, imagem, tamanho = 52 }: { tipo: string; imagem: string | null; tamanho?: number }) {
  if (imagem) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={imagem}
        alt=""
        className="shrink-0 rounded-xl object-cover"
        style={{ width: tamanho, height: tamanho }}
      />
    );
  }
  return (
    <span
      className="flex shrink-0 items-center justify-center rounded-xl text-[10px] font-extrabold tracking-wide text-white"
      style={{ width: tamanho, height: tamanho, background: COR_DO_TIPO[tipo] ?? COR_DO_TIPO.arquivos }}
      aria-hidden
    >
      {SELO_DO_TIPO[tipo] ?? "DIG"}
    </span>
  );
}