import React, { useState } from 'react';
import {
  Button,
  FormControl,
  FormLabel,
  Input,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
} from '@chakra-ui/react';

const MasterDrawer = ({ isOpen, onClose }) => {
  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });

  const handleSave = () => {
    console.log(`Сохранение мастера: ${newMaster}`);
    onClose();
  };

  return (
    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
      <DrawerOverlay />
      <DrawerContent>
        <DrawerCloseButton />
        <DrawerHeader>Добавить нового мастера</DrawerHeader>
        <DrawerBody>
          <FormControl mb='4'>
            <FormLabel>ФИО</FormLabel>
            <Input
              value={newMaster.name}
              onChange={(e) =>
                setNewMaster({ ...newMaster, name: e.target.value })
              }
              placeholder='Введите ФИО'
            />
          </FormControl>
          <FormControl>
            <FormLabel>Номер телефона</FormLabel>
            <Input
              value={newMaster.phone}
              onChange={(e) =>
                setNewMaster({ ...newMaster, phone: e.target.value })
              }
              placeholder='Введите номер телефона'
            />
          </FormControl>
        </DrawerBody>
        <DrawerFooter>
          <Button colorScheme='teal' mr={3} onClick={handleSave}>
            Сохранить
          </Button>
          <Button variant='ghost' onClick={onClose}>
            Отменить
          </Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
};

export default MasterDrawer;