import { Bell, X } from 'lucide-react';
import { getRelativeTime } from '@/lib/date-utils';
import SnoozeDropdown from '@/components/reminders/SnoozeDropdown';
import type { Reminder } from '@/types';

interface AlertBannerProps {
  alerts: Reminder[];
  onDismiss: (id: number) => void;
  onSnooze: (id: number, minutes: number) => void;
}

export default function AlertBanner({ alerts, onDismiss, onSnooze }: AlertBannerProps) {
  if (alerts.length === 0) return null;

  return (
    <div className="rounded-lg border border-border border-l-4 border-l-orange-500 bg-card animate-slide-up">
      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border">
        <div className="p-1.5 rounded-md bg-orange-500/10">
          <Bell className="h-4 w-4 text-orange-400" />
        </div>
        <span className="font-heading text-sm font-semibold">Alerts</span>
        <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-orange-500/15 text-orange-400 font-medium">
          {alerts.length}
        </span>
      </div>
      <div className="divide-y divide-border max-h-48 overflow-y-auto">
        {alerts.map((alert) => (
          <div
            key={alert.id}
            className="flex items-center gap-3 px-4 py-2 hover:bg-card-elevated transition-colors duration-150"
          >
            <div className="w-1.5 h-1.5 rounded-full bg-orange-400 shrink-0" />
            <span className="text-sm font-medium truncate flex-1 min-w-0">{alert.title}</span>
            <span className="text-[11px] text-muted-foreground shrink-0 whitespace-nowrap">
              {alert.remind_at ? getRelativeTime(alert.remind_at) : ''}
            </span>
            <SnoozeDropdown onSnooze={(m) => onSnooze(alert.id, m)} label={alert.title} direction="down" />
            <button
              onClick={() => onDismiss(alert.id)}
              aria-label={`Dismiss "${alert.title}"`}
              className="flex items-center gap-1 px-1.5 py-1 rounded hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors shrink-0"
            >
              <X className="h-3.5 w-3.5" />
              <span className="text-[11px] font-medium">Dismiss</span>
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}