import {
  Box,
  Button,
  FormControl,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  Textarea,
} from "@chakra-ui/react";

const DistributionSponsor = ({ isOpen, onClose }) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader fontSize={'md'}>Distribution from Sponsor Transaction</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <FormControl mb={"15px"}>
            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
              Date
            </FormLabel>
            <Input
              placeholder="Select Date"
              size="sm"
              rounded={'sm'}
              fontSize={"sm"}
              focusBorderColor="forestGreen.300"
              type="date"
            />
          </FormControl>

          <FormControl mb={"15px"} >
            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
            <Input 
              size="sm"
              rounded={'sm'}
              textAlign={'end'}
              focusBorderColor="forestGreen.300"
              fontSize={"sm"} placeholder="$00.00"  />
          </FormControl>

          <FormControl mb={"15px"}>
            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
              Comments
            </FormLabel>
            <Textarea 
              size="sm"
              rounded={'sm'}
              focusBorderColor="forestGreen.300"
              fontSize={"sm"} placeholder="Write Comments"  />
          </FormControl>
        </ModalBody>
        <ModalFooter>
          <Button
            bg={"hsla(139, 100%, 14%, 1)"}
            mr={3}
            color={"#fff"}
            _hover={{
              bg: "hsl(139deg 98.99% 26.59%)",
            }}
            size={'sm'}
            rounded={"sm"}
          >
            Save
          </Button>
          <Button 
            size={'sm'}
            rounded={"sm"} mr={3} onClick={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default DistributionSponsor;