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

export default function ContextHeader({ chunks, documents }) {
  const theme = useTheme();

  return (
    <>
      <Grid
        container
        border={1}
        mb={2}
        borderColor={theme.palette.border.default}
        borderRadius={2}
        padding={1.2}
        sx={{
          backgroundColor: theme.palette.background.default,
        }}
      >
        <Grid
          item
          sm={5.5}
          border={1}
          borderColor={theme.palette.border.default}
          borderRadius={2}
          alignContent={"center"}
          textAlign={"center"}
          sx={{
            backgroundColor: "white",
          }}
        >
          <Typography variant="h6">
            Nº chunks: <br /> {chunks}{" "}
          </Typography>
        </Grid>
        <Grid
          item
          ml={1}
          sm={5.5}
          border={1}
          borderColor={theme.palette.border.default}
          borderRadius={2}
          alignContent={"center"}
          textAlign={"center"}
          sx={{
            backgroundColor: "white",
          }}
        >
          <Typography variant="h6">
            Nº Doc: <br />
            {documents}
          </Typography>
        </Grid>
      </Grid>
    </>
  );
}