/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {ToggleContainer, ToggleHiddenInput, ToggleSwitchContainer, ToggleSwitch, ToggleTitleOn, ToggleTitleOff} from './style';

interface IToggle {
  handleChange: () => void;
  onTitle?: string;
  offTitle?: string;
  position?: 'on' | 'off';
}
const Toggle = (props: IToggle): JSX.Element => {
  const {onTitle, offTitle, handleChange, position} = props;

  return (
    <ToggleContainer>
      <ToggleHiddenInput type="checkbox" name="" id="toggle" checked={position === 'on'} onChange={handleChange} />
      {offTitle && <ToggleTitleOff>{offTitle}</ToggleTitleOff>}
      <ToggleSwitchContainer htmlFor="toggle">
        <ToggleSwitch />
      </ToggleSwitchContainer>
      {onTitle && <ToggleTitleOn>{onTitle}</ToggleTitleOn>}
    </ToggleContainer>
  );
};

export default Toggle;
