import NotebookWithPencil from "@/assets/icons/NotebookWithPencil";
import {
  Box,
  Typography,
  SxProps,
  Theme,
  Button,
  useTheme,
  useMediaQuery,
  IconButton,
} from "@mui/material";
import { MouseEventHandler, ReactNode } from "react";

interface Props {
  icon: ReactNode;
  headerText: string;
  discount?: string;
  text: string | string[];
  sx?: SxProps<Theme>;
  buttonProps?: {
    sx?: SxProps<Theme>;
    onClick?: MouseEventHandler<HTMLButtonElement>;
    text?: string;
  };
  price?: ReactNode;
  sendRequest?: () => void
}

export default function TariffCard({
  icon,
  headerText,
  text,
  sx,
  price,
  buttonProps,
  discount,
  sendRequest,
}: Props) {
  text = Array.isArray(text) ? text : [text];
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  return (
    <Box
      sx={{
        width: "100%",
        minHeight: "250px",
        bgcolor: "white",
        borderRadius: "12px",
        display: "flex",
        flexDirection: "column",
        alignItems: "start",
        p: "20px",

        ...sx,
      }}
    >
      <Box
        sx={{
          position: "relative",
          width: "100%",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: "16px",
        }}
      >
        {icon}
        {price && (
          <Box
            sx={{
              display: "flex",
              alignItems: "baseline",
              flexWrap: "wrap",
              columnGap: "10px",
              rowGap: 0,
              flexDirection: isMobile ? "column-reverse" : undefined,
            }}
          >
            {price}
          </Box>
        )}

        {discount && discount !== "0%" && (
          <Box
            sx={{
              padding: "5px 10px",
              position: "absolute",
              left: "50px",
              background: "#ff4904",
              borderRadius: "8px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Typography color="white">-{discount}</Typography>
          </Box>
        )}
      </Box>
      <Typography
        variant="h5"
        sx={{
          mt: "14px",
          mb: "10px",
          textOverflow: "ellipsis",
          overflow: "hidden",
          whiteSpace: "nowrap",
          width: "100%",
        }}
      >
        {headerText}
      </Typography>
      <Box
        sx={{
          width: "100%",
          mb: "auto",
        }}
      >
        {text.map((line, index) => (
          <Typography
            sx={{ overflow: "hidden", textOverflow: "ellipsis" }}
            key={index}
          >
            {line}
          </Typography>
        ))}
      </Box>
      <Box

        sx={{
          display: "flex",
          width: "100%",
          alignItems: "center",
        }}>

        {buttonProps && (
          <Button
            onClick={buttonProps.onClick}
            variant="outlined"
            sx={{
              // mt: "10px",
              color: "#7e2aea",
              minWidth: "180px",
              background: "transparent",
              "&:hover": {
                color: "#7E2AEA",
                backgroundColor: "#F2F3F7",
                border: "1px solid #7E2AEA",
              },
              "&:active": {
                color: "#FFFFFF",
                backgroundColor: " #581CA7",
                border: "1px solid  #581CA7",
              },
              ...buttonProps.sx,
            }}
          >
            {buttonProps.text}
          </Button>
        )}
        {Boolean(sendRequest) && (
          <Box
            sx={{
              ml: isMobile ? "10px" : "20px",
              bgcolor: "#F2F3F7",
              borderRadius: "8px",
            }}
          >
            {isMobile ?
              <IconButton
              onClick={sendRequest}
              sx={{
                p:"12px",
              }}
              >
                <NotebookWithPencil />
              </IconButton>
              :
              <Button
                sx={{
                  color: "#7E2AEA",
                  p: "10px 14px",
                }}
                onClick={sendRequest}
              >
                Запросить
              </Button>
            }
          </Box>
        )}
      </Box>
    </Box >
  );
}
