import React from "react";
import {
  ToggleDiv,
  ToggleInput,
  ToggleLabel,
  ToggleText,
} from "./CustomToggleStyles";
export interface CustomToggleProps {
  checked?: boolean;
  defaultChecked: boolean;
  disabled?: boolean;
  onChange?: () => void;
  name: string;
}

export const Toggle: React.FC<CustomToggleProps> = (props) => {
  const { checked, disabled, name } = props;
  return (
    <>
      <ToggleText>{name}</ToggleText>
      <ToggleLabel>
        <ToggleInput type="checkbox" {...props} />
        <ToggleDiv checked={checked} disabled={disabled} />
      </ToggleLabel>
    </>
  );
};
