import { Box } from '@mui/material';
import React from 'react';
import { useParams } from 'react-router-dom';
import EditGood from '../../components/EditGood';
import Title from '../../components/Title';
import { useGetGoodByIdQuery } from '../../store/api';
import Loader from '../../components/Loader';

function EditGoodPage() {
  const { goodId } = useParams();
  const { data, isFetching } = useGetGoodByIdQuery(goodId);
  return (
    <>
      {isFetching ? <Loader /> :
        <Box sx={{ maxWidth: '450px', m: '20px auto', width: '100%' }} >
          <Title>Create good</Title>
          <EditGood
            buttonText='Edit'
            goodId={goodId}
            name={data?.GoodFindOne?.name}
            category={data?.GoodFindOne?.categories[0]}
            price={data?.GoodFindOne?.price}
            description={data?.GoodFindOne?.description}
            goodImages={data?.GoodFindOne?.images}
          />
        </Box >
      }
    </>
  )
}

export default EditGoodPage;