import { Box, styled, Switch, Typography } from '@mui/material'
import { ReactNode } from 'react'

interface SwicthButtonProps {
  label: ReactNode
  checked: boolean
  onChange: (v: any) => void
  subtitle?: ReactNode
  disabled?: boolean
}

export default function SwitchButton({
  label,
  checked,
  onChange,
  subtitle,
  disabled,
}: SwicthButtonProps) {
  return (
    <StyledBox>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <Typography variant="body1" color={disabled ? 'grey' : 'black'}>
          {label}
        </Typography>
        <Switch
          checked={checked}
          disabled={disabled}
          onChange={(e, checked) => onChange(checked)}
        />
      </Box>
      {subtitle && <Typography variant="subtitle1">{subtitle}</Typography>}
    </StyledBox>
  )
}

const StyledBox = styled(Box)(({ theme }) => ({
  '& > .MuiBox-root': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: '1rem',
  },
  '& > .MuiTypography-root': {
    marginTop: '0.5rem',
  },
}))
