import { Chip, Divider, Stack } from "@mui/material";

const Topics = ({ historyItem }) => {
  return (
    <Stack spacing={1}>
      <Stack
        sx={{
          width: "100%",
          alignItems: "center",
        }}
        spacing={1}
        direction={"row"}
      >
        <Chip label={"موضوع"} size="small" variant="outlined" color="primary" />
        <Divider sx={{ flex: 1 }} />
        {historyItem.category_name && (
          <Chip label={historyItem.category_name} />
        )}
      </Stack>
      <Stack
        sx={{
          width: "100%",
          alignItems: "center",
        }}
        spacing={1}
        direction={"row"}
      >
        <Chip
          label={"زیر موضوع"}
          size="small"
          variant="outlined"
          color="primary"
        />
        <Divider sx={{ flex: 1 }} />
        {historyItem.subcategory_name && (
          <Chip label={historyItem.subcategory_name} />
        )}
      </Stack>
      <Stack
        sx={{
          width: "100%",
          alignItems: "center",
        }}
        spacing={1}
        direction={"row"}
      >
        <Chip
          label={"توضیحات تماس"}
          size="small"
          variant="outlined"
          color="primary"
        />
        <Divider sx={{ flex: 1 }} />
        {historyItem.description && <Chip label={historyItem.description} />}
      </Stack>
    </Stack>
  );
};

export default Topics;
