import type { ExportNotice } from './types';
import { CheckIcon } from '../../ui/icons/CheckIcon';
import { CloseIcon } from '../../ui/icons/CloseIcon';
import { InfoIcon } from '../../ui/icons/InfoIcon';

interface ExportToastProps {
  notice: ExportNotice | null;
  closeLabel: string;
  onClose: () => void;
}

export function ExportToast({ notice, closeLabel, onClose }: ExportToastProps) {
  if (!notice) return null;

  return (
    <div
      role={notice.kind === 'error' ? 'alert' : 'status'}
      aria-live={notice.kind === 'error' ? 'assertive' : 'polite'}
      className="fixed bottom-6 left-1/2 z-[60] flex max-w-[calc(100vw-2rem)] -translate-x-1/2 items-center gap-3 rounded-lg bg-navy-900 px-4 py-3 text-sm text-white shadow-lg animate-fade-in"
    >
      {notice.kind === 'success' ? (
        <CheckIcon className="h-4 w-4 shrink-0 text-teal-400" />
      ) : (
        <InfoIcon className="h-4 w-4 shrink-0 text-red-300" />
      )}
      <span className="min-w-0">{notice.message}</span>
      <button
        onClick={onClose}
        aria-label={closeLabel}
        className="-mr-1 flex h-7 w-7 shrink-0 items-center justify-center rounded text-warm-300 hover:bg-navy-800 hover:text-white"
      >
        <CloseIcon className="h-4 w-4" />
      </button>
    </div>
  );
}
