import React, { useEffect, useState } from "react";
import Fade from "../Fade/Fade";
import StyledSnackbar from "./StyledSnackbar";

export type StyledSnackbarProps = {
  variant?: "success" | "error";
};

type SnackbarProps = StyledSnackbarProps & {
  imgSrc?: string;
  duration?: number;
  label: string;
  props?: any;
};

const Snackbar: React.FC<SnackbarProps> = ({
  imgSrc,
  duration = 3000,
  label,
  variant = "error",
  ...props
}) => {
  const [show, setShow] = useState<boolean>(true);

  useEffect(() => {
    setTimeout(() => setShow(false), duration);
  }, []);

  return (
    <Fade showContent={show}>
      <StyledSnackbar variant={variant} {...props}>
        {imgSrc && <img src={imgSrc} />}
        {label}
      </StyledSnackbar>
    </Fade>
  );
};

export default Snackbar;