import { Toast } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import { HiCheck, HiExclamation, HiX } from "react-icons/hi";

type ToastProps = {
  type?: string;
  message?: string;
  timeout?: number;
};

const Toasts: FC<ToastProps> = ({
  type = "success",
  message = "Action complete successfully!",
  timeout = 3000,
}) => {
  const [show, setShow] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShow(false);
    }, timeout);

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

  return (
    <div className="flex flex-col gap-4">
      {type === "success" && show && (
        <Toast className="animate-fade fixed right-0 top-0 z-50">
          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
            <HiCheck className="h-5 w-5" />
          </div>
          <div className="ml-3 text-sm font-normal">{message}</div>
          <Toast.Toggle />
        </Toast>
      )}
      {type === "error" && show && (
        <Toast className="animate-fade fixed right-0 top-0 z-50">
          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
            <HiX className="h-5 w-5" />
          </div>
          <div className="ml-3 text-sm font-normal">{message}</div>
          <Toast.Toggle />
        </Toast>
      )}
      {type === "warning" && show && (
        <Toast className="animate-fade fixed right-0 top-0 z-50">
          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200">
            <HiExclamation className="h-5 w-5" />
          </div>
          <div className="ml-3 text-sm font-normal">{message}</div>
          <Toast.Toggle />
        </Toast>
      )}
    </div>
  );
};

export default Toasts;