import { Box, Typography, SxProps, Theme, Button, useTheme, useMediaQuery } from "@mui/material";
import cardImageBig from "@root/assets/landing/card1big.png";
import { PenaLink } from "@frontend/kitui";
import { Link as RouterLink } from "react-router-dom";

interface Props {
  light?: boolean;
  sx?: SxProps<Theme>;
  name?: string;
  desc?: string;
}

export default function WideTemplCard({ light = true, sx, name="Шаблонизатор", desc="тект заполнитель это текст который имеет" }: Props) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  return (
    <Box
      sx={{
        position: "relative",
        display: "flex",
        justifyContent: "space-between",
        py: "40px",
        px: "20px",
        backgroundColor: light ? "#E6E6EB" : "#434657",
        borderRadius: "12px",
        ...sx,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "start",
        }}
      >
        <Typography variant="h5">{name}</Typography>
        <Typography sx={{ marginTop: isTablet ? "10px" : "20px" }} maxWidth="552px">
          {desc}
        </Typography>
      </Box>
      <img
        src={cardImageBig}
        alt=""
        style={{
          display: "block",
          objectFit: "contain",
          pointerEvents: "none",
          marginBottom: "-40px",
          marginTop: "-110px",
          maxWidth: "390px",
        }}
      />
    </Box>
  );
}