import {
  Box,
  Button,
  Image,
  Radio,
  RadioGroup,
  Stack,
  Text,
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  useDisclosure,
} from "@chakra-ui/react";
import React, { useState } from "react";
import FileUploader from "../../../Components/FileUploader/FileUploader";
import blackmen from "../../../assets/blackmen.png";
import koreanpfp from "../../../assets/koreanboi.png";
import asian from "../../../assets/asain.png";
import goth from "../../../assets/goth.png";
import womenpfp from "../../../assets/womenpfp1.png";
import { useRef } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DigiTable from "../DigiTable";

const BrandVoucherTable = () => {
  const [selectedValue, setSelectedValue] = useState("1");
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = useRef();

  const renderContent = () => {
    switch (selectedValue) {
      case "1":
        return <Text>Hii</Text>;
      case "2":
        return <Text>Heelo</Text>;
      default:
        return null;
    }
  };

  return (
    <Box
      bgColor="#F3F3F9"
      h="100%"
      {...OPACITY_ON_LOAD}
      p={4}
      overflowX="scroll"
    >
      <Box
        display="flex"
        w="100%"
        flexDirection="column"
        bgColor="#FFFFFF"
        p={4}
        alignItems="start"
        rounded={"md"}
      >
        <Text fontSize="medium" fontWeight={600}>
          Select employee
        </Text>
        <FileUploader />
      </Box>

      <Text
        align="center"
        mt="1rem"
        color="#0F0F0F"
        fontWeight={600}
        fontSize="small"
      >
        Download a{" "}
        <span style={{ color: "#3725EA", fontWeight: 700 }}>
          sample spreadsheet
        </span>{" "}
        to quickly start your import
      </Text>
      <Box>
        <DigiTable />
      </Box>
    </Box>
  );
};

export default BrandVoucherTable;
