import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
import CountertopsIcon from "@mui/icons-material/Countertops";
import AssessmentIcon from "@mui/icons-material/Assessment";
import styles from "../../../styles";
import { colors } from "../../../styles";

export default function TechnicianLogButtons() {
  const navigate = useNavigate();
  return (
    <>
      <p
        style={{
          ...styles.text_dark,
          ...styles.text_L,
        }}
      >
        Metrics
      </p>
      <div
        style={{
          ...styles.flex_row,
          ...{
            alignSelf: "center",
            justifyContent: "center",
            flexWrap: "wrap",
          },
        }}
      >
        <Button
          style={{
            ...styles.flex_column,
            ...{
              alignSelf: "center",
              justifyContent: "center",
              flexWrap: "wrap",
            },
          }}
          onClick={() => {
            navigate("/view/equipments/logs");
          }}
        >
          <ManageSearchIcon
            style={{
              height: 64,
              width: 64,
              fill: colors.font_dark,
              marginLeft: "1rem",
              marginRight: "1rem",
            }}
          />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
            }}
          >
            SKU Logs
          </p>
        </Button>
        <Button
          style={{
            ...styles.flex_column,
            ...{
              alignSelf: "center",
              justifyContent: "center",
              flexWrap: "wrap",
            },
          }}
          onClick={() => {
            navigate("/view/equipment_instances/logs");
          }}
        >
          <ManageSearchIcon
            style={{
              height: 64,
              width: 64,
              fill: colors.font_dark,
              marginLeft: "1rem",
              marginRight: "1rem",
            }}
          />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
            }}
          >
            Equipment Logs
          </p>
        </Button>
        <Button
          style={{
            ...styles.flex_column,
            ...{
              alignSelf: "center",
              justifyContent: "center",
              flexWrap: "wrap",
            },
          }}
          onClick={() => {
            navigate("/view/equipments/tally");
          }}
        >
          <CountertopsIcon
            style={{
              height: 64,
              width: 64,
              fill: colors.font_dark,
              marginLeft: "1rem",
              marginRight: "1rem",
            }}
          />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
            }}
          >
            Equipment <br/>Stock Check
          </p>
        </Button>
      
      </div>
    </>
  );
}