import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material"

import CustomAccordion from "@components/CustomAccordion"
import { cardShadow } from "@root/utils/theme"

type SavedTariff = {
    date: string;
    title: string;
    amount: string;
    price: number;
    description: string;
};

interface Props {
    content: SavedTariff[];
}

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

	return (
		<Box
			sx={{
				overflow: "hidden",
				borderRadius: "12px",
				boxShadow: cardShadow,
			}}
		>
			{content.map(({ date, title, amount, price, description }, index) => (
				<CustomAccordion
					key={index}
					divide
					text={description}
					header={
						<Box
							sx={{
								paddingTop: isMobile ? "10px" : null,
								paddingBottom: isMobile ? "10px" : null,
								display: "flex",
								width: "100%",
								alignItems: upSm ? "center" : undefined,
								justifyContent: "space-between",
								flexDirection: upSm ? undefined : "column",
								gap: upMd ? "40px" : "10px",
							}}
						>
							<Typography
								sx={{
									width: "110px",
									color: theme.palette.text.secondary,
									fontSize: upMd ? "20px" : "18px",
									lineHeight: upMd ? undefined : "19px",
									fontWeight: 500,
									px: 0,
								}}
							>
								{date}
							</Typography>
							<Typography
								sx={{
									width: "100%",
									maxWidth: "200px",
									fontSize: upMd ? "18px" : "16px",
									lineHeight: upMd ? undefined : "19px",
									fontWeight: 500,
									px: 0,
								}}
							>
								{title}
							</Typography>
							<Typography
								sx={{
									width: "100%",
									maxWidth: "180px",
									display: upMd ? undefined : "none",
									fontSize: upMd ? "18px" : "16px",
									lineHeight: upMd ? undefined : "19px",
									fontWeight: 400,
									px: 0,
								}}
							>
								{amount}
							</Typography>
							<Typography
								sx={{
									width: "100%",
									maxWidth: "120px",
									textAlign: "right",
									display: upMd ? undefined : "none",
									fontSize: upMd ? "18px" : "16px",
									lineHeight: upMd ? undefined : "19px",
									fontWeight: 500,
									px: 0,
								}}
							>
								{new Intl.NumberFormat("ru-RU").format(price)} руб.
							</Typography>
							<Button
								variant="pena-contained-white1"
								sx={{
									mr: "25px",
									width: "100%",
								}}
							>
                                Купить
							</Button>
						</Box>
					}
				/>
			))}
		</Box>
	)
}
