import React from "react";
import { CityManageHatchings } from "../features/city/components/city-manage-hatchings/CityManageHatchings";
import { Grid } from "../components/grid/Grid";
import { Box } from "@mui/material";
import { useParams } from "react-router-dom";
import { CityHatchingShowTableDetail } from "../features/city/components/city-hatching-show-table-detail/CityHatchingShowTableDetail";

const AdminHatchings = () => {
  const { key } = useParams();

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
        mt={4}
      >
        {key ? (
          <CityHatchingShowTableDetail keyItem={key} />
        ) : (
          <CityManageHatchings />
        )}
      </Grid>
    </Box>
  );
};
export default AdminHatchings;
