import axios from 'axios';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import fetchProduct from 'src/api/fetchProduct';
import Loading from 'src/components/Loading';
import FormViewProduct from 'src/views/form-layouts/FormViewProduct';

export default function viewCategories() {
  let router = useRouter();
  let [product, setProduct] = useState(null);
  let { pid } = router.query;

  useEffect(() => {
    const update = async () => {
      let res = await fetchProduct({ pid });
      let { data } = res;
      let { product } = data;
      setProduct(product);
    };
    if (pid) update();
  }, [pid]);

  if (!product)
    return (
      <>
        <Loading />
      </>
    );

  return (
    <>
      <FormViewProduct product={product} />
    </>
  );
}
