'use client';

import { useEffect, useState } from 'react';
import styles from './Toast.module.css';

export interface ToastProps {
  id: string;
  message: string;
  duration?: number;
  onClose: (id: string) => void;
}

export default function Toast({ id, message, duration = 5000, onClose }: ToastProps) {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    if (duration <= 0) return;
    const timer = setTimeout(() => {
      setIsVisible(false);
      setTimeout(() => onClose(id), 300);
    }, duration);
    return () => clearTimeout(timer);
  }, [id, duration, onClose]);

  return (
    <div
      className={`${styles.toast} ${isVisible ? styles.show : styles.hide}`}
      role="status"
      aria-live="polite"
    >
      {message}
    </div>
  );
}
