import { Button, Typography, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";

export default function ChunkComponent({
  documentName,
  documentId,
  documentNumber,
  onSelectedChunk,
}) {
  const theme = useTheme();

  return (
    <>
      <Button
        onClick={() => onSelectedChunk({ documentNumber })}
        sx={{
          textTransform: "none",
          color: "inherit",
          padding: 0,
        }}
      >
        <Grid
          item
          container
          alignItems={"center"}
          xs={12}
          mb={1}
          sx={{
            backgroundColor: theme.palette.secondary.main,
            padding: "8px 12px",
            borderRadius: "10px",
            border: "1px solid",
            borderColor: theme.palette.border.default,
          }}
        >
          <Grid
            item
            container
            borderRadius={20}
            justifyContent={"center"}
            alignContent={"center"}
            border={1}
            sx={{
              backgroundColor: theme.palette.secondary.main,
              width: 35,
              height: 35,
            }}
          >
            <Typography variant="h5">{documentNumber}</Typography>
          </Grid>
          <Grid
            container
            alignItems={"center"}
            justifyContent="space-between"
            sx={{ flexGrow: 1, marginLeft: 1 }}
          >
            <Grid
              item
              container
              direction="column"
              ml={1}
              alignItems={"flex-start"}
            >
              <Grid item>
                <Typography
                  variant="h5"
                  sx={{
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  }}
                >
                  {documentName.substring(0, 8)}
                </Typography>
              </Grid>
              <Grid item>
                <Typography variant="h7" color={theme.palette.border.default}>
                  {documentId.substring(0, 8)}
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Button>
    </>
  );
}