// SwitchButton.js
import { Box, Switch, Text } from '@chakra-ui/react';
import React from 'react';

const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
  const switch_onChange_handle = () => {
    setIsSwitchOn(!isSwitchOn);
  };

  return (
    <Box display="flex" alignItems="center">
      <Switch
        size="lg"
        isChecked={isSwitchOn}
        onChange={switch_onChange_handle}
        sx={{
          ".chakra-switch__track": {
            backgroundColor: isSwitchOn ? "#707070" : "#4CCD8D",
          },
        }}
      />
      <Text ml={4} className={isSwitchOn ? 'mont' : 'year'}>
        {isSwitchOn ? 'Active' : 'Inactive'}
      </Text>
    </Box>
  );
};

export default SwitchButton;