import { Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import AmoLogo from "../../assets/icons/Amologo.png";
import { FC } from "react";

type AmoButtonProps = {
  onClick?: () => void;
};

export const AmoButton: FC<AmoButtonProps> = ({ onClick }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  return (
    <Button
      style={{
        backgroundColor: "#329dc9",
        width: isMobile ? "270px" : "310px",
        height: "47px",
        display: "inline-flex",
        justifyContent: "start",
        border: "#316a88 1px solid",
        color: "white",
        textDecoration: "none",
        cursor: "pointer",
      }}
      onClick={onClick}
    >
      <img
        src={AmoLogo}
        style={{
          height: "100%",
          maxWidth: "339px",
          objectFit: "scale-down",
          userSelect: "none",
          pointerEvents: "none",
        }}
        alt={"AmoCRM"}
      />
      <Typography
        sx={{
          margin: "auto",
          letterSpacing: "1px",
          fontSize: "14px",
          fontWeight: 600,
          textTransform: "uppercase",
        }}
      >
        Подключить
      </Typography>
    </Button>
  );
};