import { Box } from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { useLocation } from "react-router-dom";
import { ROUTE_CITY_POULTRY_FARMS } from "../routes/routes";
import { useDispatch } from "react-redux";
import { useEffect } from "react";
import { avicultureGetRequests } from "../features/aviculture/services/aviculture-requests";
import { CityPoultryFarms } from "../features/city/components/city-poultry-farms/CityPoultryFarms";

const CityAvicultureFarms = () => {
  const { pathname } = useLocation();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(avicultureGetRequests());
  }, []);

  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
            <Grid xs={12}>
              {pathname === ROUTE_CITY_POULTRY_FARMS && <CityPoultryFarms />}
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default CityAvicultureFarms;
