'use client';

import { useToastStore } from '@/stores/toast-store';

export function ToastHost() {
  const toasts = useToastStore((s) => s.toasts);
  const dismiss = useToastStore((s) => s.dismiss);

  if (!toasts.length) {
    return null;
  }

  return (
    <div
      className="pointer-events-none fixed bottom-4 right-4 z-[200] flex max-w-sm flex-col gap-2"
      aria-live="polite"
    >
      {toasts.map((t) => (
        <div
          key={t.id}
          className={`pointer-events-auto rounded-lg border px-3 py-2 text-sm shadow-lg ${
            t.variant === 'error'
              ? 'border-red-200 bg-red-50 text-red-900'
              : 'border-neutral-200 bg-white text-neutral-800'
          }`}
        >
          <div className="flex items-start justify-between gap-2">
            <span className="min-w-0 flex-1">{t.message}</span>
            <button
              type="button"
              className="shrink-0 text-neutral-400 hover:text-neutral-700"
              onClick={() => dismiss(t.id)}
              aria-label="关闭"
            >
              ×
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}