import { useEffect } from 'react';
import clsx from 'clsx';
import IconSquareCheck from './Icon/IconSquareCheck';
import IconXCircle from './Icon/IconXCircle';
import IconInfoHexagon from './Icon/IconInfoHexagon';

type ToastType = 'success' | 'error' | 'info';

type Props = {
  message: string;
  type?: ToastType;
  show: boolean;
  onClose: () => void;
};


// ── Component ─────────────────────────────────────────
const Toast = ({ message, type = 'success', show, onClose }: Props) => {
  useEffect(() => {
    if (show) {
      const timer = setTimeout(() => onClose(), 3000);
      return () => clearTimeout(timer);
    }
  }, [show, onClose]);

  const renderIcon = () => {
    switch (type) {
      case 'success':
        return <IconSquareCheck />;
      case 'error':
        return <IconXCircle />;
      case 'info':
        return <IconInfoHexagon />;
      default:
        return null;
    }
  };

  return (
    <div
      className={clsx(
        'fixed top-4 right-4 z-50 flex items-center gap-2 min-w-[250px] border rounded-md px-4 py-3 shadow-lg transition-all duration-300',
        {
          'bg-green-50 border-green-600 text-green-600': type === 'success',
          'bg-red-50 border-red-600 text-red-600': type === 'error',
          'bg-blue-50 border-blue-600 text-blue-600': type === 'info',
        },
        show ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2 pointer-events-none'
      )}
    >
      <span className="flex items-center">{renderIcon()}</span>
      <span className="text-sm font-medium">{message}</span>
    </div>
  );
};

export default Toast;