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>
    );
}