"use client";

import { useEffect, useState } from "react";

interface HappyHourBadgeProps {
  userId: number;
}

export default function HappyHourBadge({ userId }: HappyHourBadgeProps) {
  const [discount, setDiscount] = useState<number | null>(null);

  useEffect(() => {
    fetch(`/api/happy-hour?user_id=${userId}`)
      .then((r) => r.json())
      .then((data) => {
        if (data.active) {
          setDiscount(data.active.discount_pct);
        }
      })
      .catch(() => {});
  }, [userId]);

  if (!discount) return null;

  return (
    <div className="inline-flex items-center gap-2 bg-gradient-to-r from-orange-500/20 to-red-500/20 border border-orange-500/30 rounded-full px-4 py-2 animate-pulse">
      <span className="text-lg">&#x1F525;</span>
      <span className="text-sm font-bold text-orange-300">
        {discount}% off now!
      </span>
      <span className="text-xs text-orange-400/70">Happy Hour</span>
    </div>
  );
}