Alert Promo

interface AlertPromoProps {
  message: string;
  cta: string;
  onCtaClick?: () => void;
  onDismiss?: () => void;
}

export function AlertPromo({ message, cta, onCtaClick, onDismiss }: AlertPromoProps) {
  return (
    <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-violet-600 via-purple-600 to-indigo-700 p-0.5 shadow-xl">
      <div className="rounded-xl bg-gradient-to-r from-violet-600 via-purple-600 to-indigo-700 p-5">
        <div className="flex items-center gap-4 flex-wrap">
          <div className="flex-1 min-w-[200px]">
            <div className="flex items-center gap-2 mb-1">
              <svg className="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <span className="text-white/80 text-xs font-semibold uppercase tracking-wider">Limited Offer</span>
            </div>
            <p className="text-white font-medium text-sm">{message}</p>
          </div>
          <button
            onClick={onCtaClick}
            className="shrink-0 px-5 py-2.5 bg-white text-purple-700 font-semibold rounded-lg text-sm hover:bg-purple-50 transition-colors shadow-lg"
          >
            {cta}
          </button>
          {onDismiss && (
            <button
              onClick={onDismiss}
              className="shrink-0 text-white/60 hover:text-white transition-colors p-1"
              aria-label="Dismiss"
            >
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          )}
        </div>
      </div>
    </div>
  );
}