import React from "react";

import { useJobIconState } from "@qltr/util/JobTools";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";

import IconButton from "@mui/material/IconButton";

import Stack from "@mui/material/Stack";

export default function JobBox(props) {
  const { job } = props;

  const { name, status } = job;

  return (
    <Accordion expanded={false} disableGutters={true} square>
      <AccordionSummary
        style={{
          backgroundColor: "rgba(0, 0, 0, .03)",
          flexWrap: "wrap",
        }}
      >
        <Typography
          component={"span"}
          style={{ wordBreak: "break-word", margin: "auto 0" }}
        >
          {name}
        </Typography>
        <Stack sx={{ ml: "auto" }}>
          <IconButton aria-label="retry" component="span">
            {useJobIconState(job)}
          </IconButton>
        </Stack>
      </AccordionSummary>
    </Accordion>
  );
}
