import { Checkbox, FormControlLabel, Typography } from "@mui/material";

export function PropCheckbox(p: {
  editable: boolean;
  label: string;
  checked: boolean | undefined;
  onValueChange: (v: boolean) => void;
  checkboxAlwaysVisible?: boolean;
}): React.ReactElement {
  if (!p.checkboxAlwaysVisible) {
    if (!p.editable && p.checked)
      return <Typography variant="body2">{p.label}</Typography>;

    if (!p.editable) return <></>;
  }

  return (
    <FormControlLabel
      control={
        <Checkbox
          disabled={!p.editable}
          checked={p.checked}
          onChange={(e) => p.onValueChange(e.target.checked)}
        />
      }
      label={p.label}
    />
  );
}