import { Box, Stack, TextField, Button, FormControl, InputLabel, Select, OutlinedInput, MenuItem, ListItemText, Checkbox } from '@mui/material';
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { createCategory, useGetCategoriesQuery } from '../../api/api';
import EditCategory from '../../components/EditCategory';
import Title from '../../components/Title';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};


function CreateCategoryPage() {

  return (
    <Box sx={{ maxWidth: '450px', m: '20px auto', width: '100%' }} >
      <Title>Create category</Title>
      <EditCategory buttonText='Add category'/>
    </Box >

  )
}

export default CreateCategoryPage;