import { Box } from '@mui/system';
import React from 'react';
import { useParams } from 'react-router-dom';
import { useGetCategoryByIdQuery } from '../../api/api';
import EditCategory from '../../components/EditCategory';
import Loader from '../../components/Loader';
import Title from '../../components/Title';

function EditCategoryPage() {
  const { categoryId } = useParams();
  const { data, isFetching } = useGetCategoryByIdQuery(categoryId);
  return (
    <>
      {isFetching ? <Loader /> :
        <Box sx={{ maxWidth: '450px', m: '20px auto', width: '100%' }}>
          <Title>Edit category</Title>
          <EditCategory
            buttonText='Update'
            categoryId={categoryId}
            nameCategory={data?.CategoryFindOne?.name}
            subCategories={data?.CategoryFindOne?.subCategories}
          />
        </Box>
        }
    </>
  )
}

export default EditCategoryPage;