import { Box, Typography, SxProps, Theme, Button } 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>;
}

export default function WideTemplCard({ light = true, sx }: Props) {
  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">Шаблонизатор</Typography>
        <Typography mt="20px" maxWidth="552px">
          Текст- это текст, который имеет некоторые характеристики реального письменного текс
        </Typography>
        {light ? (
          <Button variant="pena-contained-light" sx={{ mt: "28px" }}>
            Подробнее
          </Button>
        ) : (
          <PenaLink
            component={RouterLink}
            to="/"
            sx={{
              mt: "auto",
            }}
          >
            Подробнее
          </PenaLink>
        )}
      </Box>
      <img
        src={cardImageBig}
        alt=""
        style={{
          display: "block",
          objectFit: "contain",
          pointerEvents: "none",
          marginBottom: "-40px",
          marginTop: "-110px",
          maxWidth: "390px",
        }}
      />
    </Box>
  );
}