import { useTheme } from "@mui/material";
import CustomButton from "../CustomButton";


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

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

    return (
        <CustomButton
            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",
                "&:hover": {
                    backgroundColor: theme.palette.lightPurple.main
                },
            }}
        >
            {children}
        </CustomButton>
    );
}