import { useToastStore } from '../../stores/toastStore';

const colorMap = {
  success: 'bg-green-700 border-green-500',
  error: 'bg-red-700 border-red-500',
  info: 'bg-blue-700 border-blue-500',
};

export function ToastContainer() {
  const toasts = useToastStore((s) => s.toasts);
  const removeToast = useToastStore((s) => s.removeToast);

  if (toasts.length === 0) return null;

  return (
    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className={`${colorMap[toast.type]} border rounded-lg px-4 py-3 text-white shadow-lg flex items-center justify-between gap-2`}
        >
          <span className="text-sm">{toast.message}</span>
          <button
            onClick={() => removeToast(toast.id)}
            className="text-white/70 hover:text-white min-h-[44px] min-w-[44px] flex items-center justify-center"
          >
            &times;
          </button>
        </div>
      ))}
    </div>
  );
}
