import { Alert, List } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import { HiInformationCircle } from "react-icons/hi";

type Props = {
  message?: string;
  data?: { [key: string]: string };
  className?: string;
  timeout?: number;
};

const Alerts: FC<Props> = ({
  message = "Validation Errors",
  data = {},
  className = "",
  timeout = 3000,
}) => {
  const [show, setShow] = useState(true);

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

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

  return (
    <>
      {show && (
        <Alert
          color="failure"
          className={`${className} w-500 fixed right-0 top-16 z-50 p-5`}
        >
          <div className="flex">
            <div className="mr-1 mt-1">
              <HiInformationCircle />
            </div>
            <span className="mb-2 font-medium"> {message}!</span>
          </div>
          <List>
            {Object.keys(data)?.map((item: any, index: number) => (
              <div key={index}>
                <List.Item className="text-center" key={index}>
                  {data?.[item]?.[0]}
                </List.Item>
              </div>
            ))}
            {data === undefined && (
              <>
                <p>Something went wrong!</p>
              </>
            )}
          </List>
        </Alert>
      )}
    </>
  );
};

export default Alerts;