import {
  Box,
  Button,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  FormControl,
  FormLabel,
  Grid,
  Input,
  Textarea,
  useDisclosure,
} from "@chakra-ui/react";
import React from "react";

const AcademicdetailsEdit = ({ isOpen, onClose }) => { 
  return (
    <>
      <Drawer onClose={onClose} isOpen={isOpen} size={"lg"}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader fontSize={"md"}>manage Academy</DrawerHeader>
          <Box as="form">
            <DrawerBody>
              <Grid templateColumns="repeat(2, 1fr)" gap={4}>
                <Box>
                  <FormLabel fontSize={"sm"}>Header (English)</FormLabel>
                  <Input
                    type="number"
                    size={"sm"}
                    value={''}
                  />
                </Box>
                <Box>
                  <FormLabel fontSize={"sm"}>Header (Arabic)</FormLabel>
                  <Input
                    type="number"
                    size={"sm"}
                    value={''}
                  />
                </Box>
                <Box>
                  <FormLabel fontSize={"sm"}>Content (English)</FormLabel>
                  <Textarea
                    type="number"
                    size={"sm"}
                    value={''}
                    resize={'none'}
                  />
                </Box>
                <Box>
                  <FormLabel fontSize={"sm"}>Content (Arabic)</FormLabel>
                  <Textarea
                    type="number"
                    size={"sm"}
                    value={''}
                    resize={'none'}
                  />
                </Box>
                <Box>
                  <FormLabel fontSize={"sm"}>Content (Arabic)</FormLabel>
                  <Input
                    type="file"
                    size={"sm"}
                    value={''}
                    resize={'none'}
                    className="form-control"
                  />
                </Box>
              </Grid>
            </DrawerBody>
            <DrawerFooter>
            <Button
              variant="outline"
              colorScheme={"green"}
              rounded={"sm"}
              size={"sm"}
              mr={3}
              onClick={onClose}
            >
              Cancel
            </Button>

            <Button
              colorScheme={"green"}
              rounded={"sm"}
              size={"sm"}
              onClick={() => setAlert(true)}
            >
              Save
            </Button>
          </DrawerFooter>
          </Box>
        </DrawerContent>
      </Drawer>
    </>
  );
};

export default AcademicdetailsEdit;
