import { Box } from "@mui/material";
import { FC } from "react";
import { QuizMetricType } from "@model/quizSettings";
import zapierLogo from "@/assets/icons/logo/zapier.png";
import { IntegrationButton } from "./IntegrationButton";

type ZapierButtonProps = {
  setIsModalOpen: (value: boolean) => void;
  setCompanyName: (value: keyof typeof QuizMetricType) => void;
};

export const ZapierButton: FC<ZapierButtonProps> = ({
  setIsModalOpen,
  setCompanyName,
}) => {
  const handleClick = () => {
    setCompanyName("zapier" as keyof typeof QuizMetricType);
    setIsModalOpen(true);
  };

  return (
    <IntegrationButton onClick={handleClick} padding="14px 128px 14px 20px">
      <Box
        component="img"
        src={zapierLogo}
        alt="Zapier"
        sx={{
          width: "103px",
          height: "33px",
          objectFit: "contain",
        }}
      />
    </IntegrationButton>
  );
};