import { CircularProgress, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Grid } from "../../components/grid/Grid";
import { formatJustDate } from "../../utils/formatTime";

export const ChickenPriceStats = ({ province }) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const { authToken } = useSelector((state) => state.userSlice);

  useEffect(() => {
    fetch(`${province}total_pricing_dashboard/`, {
      headers: {
        Authorization: `Bearer ${authToken}`,
      },
    })
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, [province]);

  return (
    <>
      {loading ? (
        <CircularProgress />
      ) : (
        <Grid
          container
          direction="column"
          justifyContent="center"
          alignItems="center"
        >
          {/* <img
            src="https://th.bing.com/th/id/OIG.mvyKs_EnCNkBrbPsrcIX?pid=ImgGn"
            width={200}
          /> */}
          <Typography my={2} fontWeight={"bold"}>
            قیمت روز مرغ
          </Typography>
          <Grid container direction="column" alignItems="start">
            <Typography color="primary" variant="body2" mb={1}>
              آخرین قیمت: {data?.last_price?.toLocaleString()} ﷼
            </Typography>
            <Typography color="primary" variant="body2" mb={1}>
              تاریخ بروزرسانی: {formatJustDate(data?.last_change)}
            </Typography>
          </Grid>
        </Grid>
      )}
    </>
  );
};
