import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { NavLink } from "../../../../components/nav-link/NavLink";
import LinkItem from "../../../../components/link-item/LinkItem";
import { FaFilePdf } from "react-icons/fa";
import { useDispatch } from "react-redux";
import PorvinceGetReportOperations from "../../../province/components/province-get-report-operations/PorvinceGetReportOperations";
import { OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";

export const CommerceOperations = () => {
  const dispatch = useDispatch();
  return (
    <Grid
      container
      gap={SPACING.SMALL}
      p={SPACING.SMALL}
      direction={{ xs: "column", md: "row" }}
      justifyContent="center"
      style={{ placeContent: "baseline" }}
    >
      <Grid container direction="column" style={{ width: "100%" }}>
        <Grid container gap={SPACING.SMALL} justifyContent="center">
          <NavLink
            onClick={() =>
              dispatch(
                OPEN_MODAL({
                  title: "اطلاعات گزارش",
                  content: <PorvinceGetReportOperations />,
                })
              )
            }
          >
            <LinkItem
              icon={
                <FaFilePdf
                  className="svg-icon-color"
                  color="#244CCC"
                  size={30}
                />
              }
              title="گزارش روزانه"
              description="گزارش روزانه"
            />
          </NavLink>
        </Grid>
      </Grid>
    </Grid>
  );
};
