import { Box, 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">
      <Box
        as="button"
        display="flex"
        alignItems="center"
        justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
        width="100px"
        height="40px"
        borderRadius="20px"
        backgroundColor={isSwitchOn ? "#707070" : "#4CCD8D"}
        onClick={switch_onChange_handle}
        position="relative"
        transition="background-color 0.2s"
        _before={{
          content: '""',
          position: "absolute",
          width: "40px",
          height: "40px",
          borderRadius: "50%",
          backgroundColor: "#FFF",
          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
          transform: isSwitchOn ? "translateX(60px)" : "translateX(0)",
          transition: "transform 0.2s",
        }}
      >
        <Text
          color="#FFF"
          fontWeight="bold"
          zIndex={1}
          position="absolute"
          left={isSwitchOn ? "10px" : "auto"}
          right={isSwitchOn ? "auto" : "10px"}
        >
          {isSwitchOn ? 'Active' : 'Inactive'}
        </Text>
      </Box>
    </Box>
  );
};

export default SwitchButton;
