Duffer Derek

import "./toast.scss";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import close from "@/images/close.svg";

interface ToastProps {
  status: "success" | "failed" | "warning";
  content: string | null;
  duration?: number;
  onClose?: () => void;
}

export default function Toast({ status, content, duration = 5000, onClose }: ToastProps) {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    if (content) {
      setIsVisible(true);
      const timer = setTimeout(() => {
        setIsVisible(false);
        onClose?.();
      }, duration);

      return () => clearTimeout(timer);
    }
  }, [content, duration, onClose]);

  const handleClose = () => {
    setIsVisible(false);
    onClose?.();
  };

  if (!content || !isVisible) return null;

  return (
    <div
      className={`toast ${
        status === "success" ? "success" : status === "failed" ? "failed" : "warning"
      }`}
    >
      <p>{content}</p>
      <div className="close" onClick={handleClose}>
        <Image src={close} alt="close" width={20} height={20} />
      </div>
    </div>
  );
}