import { useToastStore } from '../stores/toast'
import type { ToastType } from '../stores/toast'
import styles from './Toast.module.css'

const TYPE_CLASS: Record<ToastType, string> = {
  success: styles.toastSuccess,
  error: styles.toastError,
  info: styles.toastInfo,
}

export default function ToastContainer() {
  const { toasts, removeToast } = useToastStore()

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

  return (
    <div className={styles.container}>
      {toasts.map((t) => (
        <div key={t.id} className={TYPE_CLASS[t.type]}>
          <span>{t.message}</span>
          <button
            className={styles.closeBtn}
            onClick={() => removeToast(t.id)}
            aria-label="关闭"
          >
            ×
          </button>
        </div>
      ))}
    </div>
  )
}