/** @jsxImportSource @emotion/react */

const Toast = (
  message: string,
  type: "info" | "warn" | "error" = "info",
  duration: number = 2000
) => {
  const div = document.createElement("div");
  div.style.cssText = `
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: ${
          type === "info" ? "#333" : type === "warn" ? "#ff9800" : "#f44336"
        };
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        z-index: 1000;
      `;
  div.innerText = message;
  document.body.appendChild(div);
  setTimeout(() => {
    document.body.removeChild(div);
  }, duration);
};

export default Toast;