import React from "react";
import { Icone } from "../base/Icone.jsx";
import { Selo } from "../base/Selo.jsx";
import { Botao } from "../base/Botao.jsx";
import { NotaOferta } from "./NotaOferta.jsx";
const reais = (c) => (c / 100).toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
/** Cartão da oferta: imagem, loja, título, preços, selos, motivos e nota. */
export function CartaoOferta({ oferta, aoAbrir, aoEnviar, aoDescartar, selecionado = false, compacto = false, className = "" }) {
  const o = oferta || {};
  const desconto = o.precoAnteriorCentavos ? Math.round((1 - o.precoCentavos / o.precoAnteriorCentavos) * 100) : null;
  return (
    <article className={["ach-oferta", compacto ? "ach-oferta--compacto" : "", selecionado ? "ach-oferta--selecionado" : "", className].filter(Boolean).join(" ")} onClick={aoAbrir ? () => aoAbrir(o) : undefined} style={aoAbrir ? { cursor: "pointer" } : undefined}>
      <div className="ach-oferta__imagem">{o.imagem ? <img src={o.imagem} alt="" /> : <Icone nome="package" tamanho={compacto ? 22 : 30} />}</div>
      <div className="ach-oferta__corpo">
        <span className="ach-oferta__loja">{o.loja}{o.oficial && <Icone nome="badge-check" tamanho={13} style={{ color: "var(--marca)" }} />}{o.vendidos != null && <span>· {o.vendidos.toLocaleString("pt-BR")} vendidos</span>}{o.avaliacao != null && <span>· <Icone nome="star" tamanho={11} /> {o.avaliacao.toFixed(1)}</span>}</span>
        <h3 className="ach-oferta__titulo">{o.titulo}</h3>
        <div className="ach-oferta__precos">
          <span className="ach-oferta__preco">{reais(o.precoCentavos || 0)}</span>
          {o.precoAnteriorCentavos && <span className="ach-oferta__de">{reais(o.precoAnteriorCentavos)}</span>}
          {desconto != null && desconto > 0 && <Selo tom="destaque" icone={<Icone nome="trending-down" tamanho={12} />}>-{desconto}%</Selo>}
        </div>
        {!compacto && (
          <div className="ach-oferta__selos">
            {o.menorPreco90d && <Selo tom="marca" icone={<Icone nome="history" tamanho={12} />}>Menor preço em 90 dias</Selo>}
            {o.freteGratis && <Selo tom="sucesso" icone={<Icone nome="truck" tamanho={12} />}>Frete grátis</Selo>}
            {o.relampago && <Selo tom="destaque" icone={<Icone nome="flame" tamanho={12} />}>Relâmpago</Selo>}
            {o.descontoInflado && <Selo tom="alerta" icone={<Icone nome="triangle-alert" tamanho={12} />}>"De" inflado</Selo>}
          </div>
        )}
        {!compacto && o.motivos && o.motivos.length > 0 && (
          <ul className="ach-oferta__motivos">{o.motivos.map((m, i) => <li key={i}><Icone nome="check" tamanho={14} />{m}</li>)}</ul>
        )}
      </div>
      <div className="ach-oferta__lado">
        <NotaOferta nota={o.nota || 0} tamanho={compacto ? "pequeno" : "medio"} />
        {!compacto && (aoEnviar || aoDescartar) && (
          <div className="ach-oferta__acoes" onClick={(e) => e.stopPropagation()}>
            {aoDescartar && <Botao variante="fantasma" tamanho="pequeno" onClick={() => aoDescartar(o)}>Descartar</Botao>}
            {aoEnviar && <Botao tamanho="pequeno" icone={<Icone nome="send" tamanho={14} />} onClick={() => aoEnviar(o)}>Enviar</Botao>}
          </div>
        )}
      </div>
    </article>
  );
}