front-hub/src/pages/History/AccordionWrapper.tsx

import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomAccordion from "@components/CustomAccordion";
import { cardShadow } from "@root/utils/theme";

export type History = {
  title: string;
  date: string;
  info: string;
  description: string;
  payMethod?: string;
  expired?: boolean;
};

interface AccordionWrapperProps {
  content: History[];
}

export default function AccordionWrapper({ content }: AccordionWrapperProps) {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
  const isTablet = useMediaQuery(theme.breakpoints.down(900));
  const isMobile = useMediaQuery(theme.breakpoints.down(560));

  return (
    <Box
      sx={{
        overflow: "hidden",
        borderRadius: "12px",
        boxShadow: cardShadow,
      }}
    >
      {content.map((accordionItem, index) => (
        <CustomAccordion
          key={index}
          divide
          text={accordionItem.description}
          header={
            <Box
              sx={{
                width: "100%",
                height: upMd ? "72px" : undefined,
                padding: "20px 20px 20px 0",
                display: "flex",
                justifyContent: "space-between",
                cursor: "pointer",
                userSelect: "none",
                gap: "20px",
                alignItems: upSm ? "center" : undefined,
                flexDirection: upSm ? undefined : "column",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  alignItems: upSm ? "center" : undefined,
                  justifyContent: "space-between",
                  flexDirection: upSm ? undefined : "column",
                  gap: upMd ? "40px" : "10px",
                }}
              >
                <Typography
                  sx={{
                    width: "110px",
                    fontSize: upMd ? "20px" : "18px",
                    lineHeight: upMd ? undefined : "19px",
                    fontWeight: 500,
                    color: accordionItem.expired
                      ? theme.palette.text.disabled
                      : theme.palette.text.secondary,
                    px: 0,
                  }}
                >
                  {accordionItem.date}
                </Typography>

                <Typography
                  sx={{
                    fontSize: upMd ? "18px" : "16px",
                    lineHeight: upMd ? undefined : "19px",
                    fontWeight: 500,
                    color: accordionItem.expired
                      ? theme.palette.text.disabled
                      : theme.palette.gray.dark,
                    px: 0,
                  }}
                >
                  {accordionItem.title}
                </Typography>
              </Box>
              <Box
                sx={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  flexFlow: "1",
                  flexBasis: "60%",
                }}
              >
                <Typography
                  sx={{
                    display: upMd ? undefined : "none",
                    fontSize: upMd ? "18px" : "16px",
                    lineHeight: upMd ? undefined : "19px",
                    fontWeight: 400,
                    color: accordionItem.expired
                      ? theme.palette.text.disabled
                      : theme.palette.gray.dark,
                    px: 0,
                  }}
                >
                  {accordionItem.payMethod && (
                    <Typography>
                      Способ оплаты: {accordionItem.payMethod}
                    </Typography>
                  )}
                </Typography>
                <Box
                  sx={{
                    display: "flex",
                    height: "100%",
                    alignItems: "center",
                    gap: upSm ? "111px" : "17px",
                    width: "100%",
                    maxWidth: isTablet ? null : "160px",
                  }}
                >
                  <Typography
                    sx={{
                      marginLeft: isTablet ? (isMobile ? null : "auto") : null,
                      color: accordionItem.expired
                        ? theme.palette.text.disabled
                        : theme.palette.gray.dark,
                      fontSize: upSm ? "20px" : "16px",
                      fontWeight: 500,
                      textAlign: "left",
                    }}
                  >
                    {accordionItem.info}
                  </Typography>
                </Box>
              </Box>
            </Box>
          }
        />
      ))}
    </Box>
  );
}