import clsx from "clsx";
import React from "react";
import Button from "../ui/Button";
import useToastsStore from "../../store/toastsStore";

export interface ToastLayoutProps {
  id: string;
  type: "notification" | "warning";
  title: string;
  message: string;
  onDeny: () => void;
  onAllow: () => void;
  image?: string;
  icon?: React.ReactNode;
}

export default function ToastLayout({
  id,
  type,
  title,
  message,
  onDeny,
  onAllow,
}: ToastLayoutProps) {
  const { removeToast } = useToastsStore();

  function handleDeny() {
    onDeny();
    removeToast(id);
  }

  function handleAllow() {
    onAllow();
    removeToast(id);
  }

  return (
    <div className="flex w-[20.833vw] rounded-[1.944vw] p-[0.556vw] bg-white shadow-[0_4px_40px_0_rgba(15,16,17,0.1)]">
      <div className="flex flex-col gap-[0.556vw]">
        <div
          className={clsx(
            "button-m",
            type === "notification" ? "text-[#7D7D7D]" : "text-[#FF4517]"
          )}
        >
          {title}
        </div>
        <div className="text-m">{message}</div>

        <div className="flex gap-[0.556vw]">
          <Button variant="critical" size="small" onClick={handleDeny}>
            Отклонить
          </Button>
          <Button variant="primary" size="small" onClick={handleAllow}>
            Разрешить
          </Button>
        </div>
      </div>
    </div>
  );
}
