"use client";

import { useEffect, useState } from "react";

type Props = {
  code: string;
  className?: string;
};

export function PromoCodeCopy({ code, className = "" }: Props) {
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (!copied) return;
    const timeout = setTimeout(() => setCopied(false), 2000);
    return () => clearTimeout(timeout);
  }, [copied]);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
    } catch {
      setCopied(false);
    }
  };

  return (
    <button
      type="button"
      onClick={copy}
      aria-label={`Copier le code promo ${code}`}
      className={`inline-flex items-center gap-3 rounded-2xl border-2 border-dashed border-[#ff8a1f] bg-[#ff8a1f14] px-4 py-2.5 text-left transition hover:bg-[#ff8a1f24] ${className}`}
    >
      <span className="font-mono text-lg font-bold tracking-[0.14em] text-[#ffb15c]">{code}</span>
      <span className="rounded-full bg-[#ff8a1f] px-2.5 py-1 text-[11px] font-bold uppercase tracking-[0.12em] text-[#1b0f24]" aria-live="polite">
        {copied ? "Copié !" : "Copier"}
      </span>
    </button>
  );
}