import { useMapStore } from '../stores/mapStore'

const TYPE_STYLES = {
  info: 'border-gruvbox-blue text-gruvbox-blue',
  success: 'border-gruvbox-green text-gruvbox-green',
  error: 'border-gruvbox-red text-gruvbox-red',
  warning: 'border-gruvbox-yellow text-gruvbox-yellow',
}

export default function ToastContainer() {
  const toasts = useMapStore((s) => s.toasts)
  const removeToast = useMapStore((s) => s.removeToast)

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

  return (
    <div className="fixed top-14 right-4 z-50 flex flex-col gap-2 max-w-sm">
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className={`px-4 py-2 bg-gruvbox-bg1 border-l-4 rounded shadow-lg text-sm flex items-start gap-2 ${TYPE_STYLES[toast.type]}`}
        >
          <span className="flex-1 text-gruvbox-fg">{toast.message}</span>
          <button
            onClick={() => removeToast(toast.id)}
            className="text-gruvbox-fg4 hover:text-gruvbox-fg text-xs"
          >
            ✕
          </button>
        </div>
      ))}
    </div>
  )
}