import { Box } from "@mui/material";
import { FC, useState, ReactNode } from "react";

type IntegrationButtonProps = {
  children: ReactNode;
  onClick: () => void;
  padding?: string;
};

export const IntegrationButton: FC<IntegrationButtonProps> = ({
  children,
  onClick,
  padding = "0 20px",
}) => {
  const [isPressed, setIsPressed] = useState(false);

  const handleMouseDown = () => setIsPressed(true);
  const handleMouseUp = () => setIsPressed(false);
  const handleMouseLeave = () => setIsPressed(false);

  return (
    <Box
      sx={{
        width: 250,
        height: 60,
        backgroundColor: "white",
        borderRadius: "8px",
        padding,
        display: "flex",
        alignItems: "center",
        cursor: "pointer",
        transition: "all 0.2s ease",
        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
        transform: isPressed ? "translateY(1px)" : "translateY(0)",
        "&:hover": {
          backgroundColor: "#f8f9fa",
          boxShadow: "0 4px 8px rgba(0, 0, 0, 0.15)",
          transform: "translateY(-1px)",
        },
        "&:active": {
          transform: "translateY(1px)",
          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
        },
      }}
      onClick={onClick}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseLeave}
    >
      {children}
    </Box>
  );
}; 