'use client';

import { useState } from 'react';
import { ClubAnnouncement } from '@/lib/hbfc-data';
import { Bell, Sparkles, X } from 'lucide-react';

interface AnnouncementBannerProps {
  announcements: ClubAnnouncement[];
  onActionClick: () => void;
}

export function AnnouncementBanner({ announcements, onActionClick }: AnnouncementBannerProps) {
  const [dismissed, setDismissed] = useState(false);

  if (dismissed || announcements.length === 0) return null;

  const current = announcements[0];

  return (
    <div
      id="announcement-banner"
      className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-emerald-900 via-emerald-950 to-neutral-950 border-b border-emerald-500/30 text-white px-4 py-2 text-xs flex items-center justify-between shadow-lg"
    >
      <div className="max-w-7xl mx-auto flex-1 flex items-center justify-center gap-3 text-center px-4">
        <span className="px-2 py-0.5 rounded text-[10px] font-black uppercase bg-amber-400 text-neutral-950 shrink-0">
          {current.urgent ? 'URGENT' : 'NOTICE'}
        </span>

        <p className="text-neutral-200 font-medium truncate sm:whitespace-normal">
          {current.text}
        </p>

        <button
          onClick={onActionClick}
          className="underline font-bold text-amber-300 hover:text-amber-200 shrink-0 ml-2 hidden sm:inline"
        >
          Details
        </button>
      </div>

      <button
        onClick={() => setDismissed(true)}
        className="text-neutral-400 hover:text-white p-1 rounded transition-colors shrink-0"
        title="Dismiss announcement"
      >
        <X className="w-3.5 h-3.5" />
      </button>
    </div>
  );
}