import Icon from "../../Icon";
import { buildOfferUrl, formatPrice, registrarName } from "@/lib/tld-pricing";
import { EDGE } from "./styles";

// One price column of a TLD row: the winning price, the registrar behind it,
// the crossed-out regular price and the coupon code that gets you there.
export default function PriceCell({ offer, registrars, tld, symbol }) {
  const price = formatPrice(offer?.price, symbol);

  if (!price) {
    return (
      <span className="font-mono text-lg font-black text-ink-300 dark:text-ink-700">
        —
      </span>
    );
  }

  const registrar = registrars?.[offer?.registrar];
  const name = registrarName(registrars, offer?.registrar);
  const url = buildOfferUrl(offer, registrar, tld);
  const listPrice = formatPrice(offer?.listPrice, symbol);

  return (
    <div className="flex flex-col items-start gap-1">
      <div className="flex items-baseline gap-2">
        <span className="font-mono text-[22px] font-black leading-none tracking-tight tabular-nums text-ink-900 dark:text-ink-50">
          {price}
        </span>

        {listPrice && (
          <span className="font-mono text-[11px] font-bold text-ink-400 line-through decoration-2 dark:text-ink-600">
            {listPrice}
          </span>
        )}
      </div>

      {name &&
        (url ? (
          <a
            href={url}
            target="_blank"
            rel="sponsored noopener noreferrer"
            className={
              "group/reg inline-flex items-center gap-1 rounded-md border-2 bg-white px-1.5 py-0.5 text-[11px] font-black uppercase tracking-[0.08em] text-ink-900 transition hover:bg-lime-accent dark:bg-ink-800 dark:text-ink-100 dark:hover:bg-brand-500 dark:hover:text-white " +
              EDGE
            }
          >
            {name}
            <Icon.ArrowRight className="h-3 w-3 -rotate-45 transition group-hover/reg:translate-x-0.5" />
          </a>
        ) : (
          <span className="text-[11px] font-bold uppercase tracking-[0.08em] text-ink-500 dark:text-ink-400">
            {name}
          </span>
        ))}

      {offer?.coupon && (
        <span className="inline-flex w-fit items-center gap-1 rounded-md border-2 border-dashed border-brand-500 bg-brand-50 px-1.5 py-0.5 font-mono text-[10px] font-black uppercase tracking-wide text-brand-700 dark:border-brand-400 dark:bg-brand-500/15 dark:text-brand-200">
          <Icon.Sparkle className="h-2.5 w-2.5" />
          {offer.coupon}
        </span>
      )}
    </div>
  );
}