"use client";

import { Ticket, X } from "lucide-react";
import { useAvisoDoCupomDoLink } from "@/components/AvisoDoCupomDoLink";

/*
  O aviso do link do cupom (?cupom=CODIGO) no desenho da Boutique. A regra de
  quando falar é a mesma dos outros temas (useAvisoDoCupomDoLink); o desenho
  é só dele, com os tokens --bq-*.
*/

export function BoutiqueAvisoDoCupom() {
  const aviso = useAvisoDoCupomDoLink();
  if (!aviso) return null;
  return (
    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-[95] flex justify-center px-4 sm:bottom-6">
      <div
        role="status"
        className="pointer-events-auto flex w-full max-w-md items-start gap-3 border p-3.5 shadow-lg"
        style={{ borderRadius: "var(--bq-radius-xl)", borderColor: "var(--bq-border)", backgroundColor: "var(--bq-surface)", color: "var(--bq-foreground)" }}
      >
        <span
          className="flex h-10 w-10 shrink-0 items-center justify-center"
          style={{ borderRadius: "var(--bq-radius-lg)", backgroundColor: "var(--bq-primary)", color: "var(--bq-primary-fg)" }}
        >
          <Ticket className="h-5 w-5" />
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-[14px] font-semibold">{aviso.titulo}</p>
          <p className="mt-0.5 text-[12.5px] leading-snug text-[var(--bq-muted-fg)]">{aviso.texto}</p>
        </div>
        <button type="button" onClick={aviso.fechar} className="p-1 text-[var(--bq-muted-fg)] hover:opacity-80" aria-label="Fechar aviso">
          <X className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}