index.jsx

import { useState, useEffect } from 'react';
import WarningCircleIcon from '@/icons/Common/warning_circle';

const Toast = ({ message, type, timeout, dataTestId, size, clearData, bgColor, position }) => {
  const [visible, setVisible] = useState(true);

  const colors = {
    success: bgColor || 'bg-green-500',
    error: bgColor || 'bg-red-500',
  };

  const textColor = type === 'success' ? 'text-white' : 'text-white';

  const containerStyles = `flex ${
    size === 'sm' ? 'items-center py-1 px-2' : 'p-4'
  } w-auto text-sm ${colors[type]} ${textColor} rounded-md shadow-lg`;

  useEffect(() => {
    const timer = setTimeout(() => {
      setVisible(false);
      clearData && clearData();
    }, timeout || 5000);

    return () => clearTimeout(timer);
  }, [timeout]);

  return visible ? (
    <div
      className={`absolute ${
        !position ? 'top-5' : 'bottom-5'
      } left-0 right-0 z-50 flex justify-center items-center mx-4`}
      data-testid={dataTestId}>
      <div className={containerStyles}>
        {type === 'error' && <WarningCircleIcon fillColor='#FFF' />}
        <p className='ml-2 capitalize'>{message}</p>
      </div>
    </div>
  ) : null;
};

export default Toast;