import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
import React, { useState } from "react";
import SingleAddress from "./SingleAddress";

const WhereToShare = ({ register }) => {
  const [selectedValue, setSelectedValue] = useState("1");

  const renderContent = () => {
    switch (selectedValue) {
      case "1":
        return <SingleAddress />;
      case "2":
        return <Box>Add department content</Box>;
      default:
        return null;
    }
  };

  return (
    <>
      <RadioGroup onChange={setSelectedValue} value={selectedValue}>
        <Stack spacing={4} direction="row">
          <Box
            p={1}
            display="flex"
            flexDirection="row"
            borderRadius="5px"
            bgColor="#F4F4F4"
          >
            <Radio size="sm" colorScheme="purple" value="1">
              Single address
            </Radio>
          </Box>
          <Box
            p={2}
            display="flex"
            flexDirection="row"
            borderRadius="5px"
            bgColor="#F4F4F4"
          >
            <Radio size="sm" colorScheme="blue" value="2">
              Multiple address
            </Radio>
          </Box>
        </Stack>
      </RadioGroup>
      <Box mt={4}>{renderContent()}</Box>
    </>
  );
};

export default WhereToShare;
