import { Button, SxProps, Theme, useTheme } from "@mui/material";

interface Props {
  children?: React.ReactNode;
  isSelected?: boolean;
  onClick: () => void;
  sx?: SxProps<Theme>;
}

export default function SelectableButton({
  children,
  isSelected = false,
  onClick,
  sx,
}: Props) {
  const theme = useTheme();

  return (
    <Button
      variant="contained"
      onClick={onClick}
      sx={{
        backgroundColor: isSelected
          ? theme.palette.brightPurple.main
          : theme.palette.background.default,
        border: isSelected ? "none" : `1px solid ${theme.palette.grey2.main}`,
        color: isSelected ? "white" : theme.palette.grey2.main,
        py: isSelected ? "12px" : "11px",
        width: "auto",
        flex: "1 1 auto",
        boxShadow: "none",
        ...sx,
      }}
    >
      {children}
    </Button>
  );
}