import { Box } from "@chakra-ui/react";

interface Props {
  title1: string;
  description1: string;
  title2: string;
  description2: string;
}
function TwoCardsSideBySide({
  title1,
  description1,
  title2,
  description2,
}: Props) {
  return (
    <Box
      w="1280px"
      h="272px"
      justifyContent="center"
      alignItems="center"
      gap="5"
      display="inline-flex"
    >
      <Box
        display="inline-flex"
        flexDirection="column"
        justifyContent="start"
        alignItems="start"
        gap="30px"
      >
        <Box
          color="text.neutral.800"
          fontSize="32px"
          fontWeight="black"
          lineHeight="10"
        >
          {title1}
        </Box>
        <Box
          w="550px"
          color="text.neutral.800"
          fontSize="16px"
          fontWeight="normal"
          lineHeight="normal"
        >
          {description1}
        </Box>
      </Box>
      <Box w="710px" h="272px" pos="relative">
        <Box
          w="710px"
          h="272px"
          left="0"
          top="0"
          pos="absolute"
          bg="brand.purple"
          roundedTopLeft="sm"
          roundedBottomLeft="sm"
        />
        <Box
          w="520px"
          h="212px"
          left="30px"
          top="30px"
          pos="absolute"
          display="inline-flex"
          flexDirection="column"
          justifyContent="start"
          alignItems="start"
          gap="30px"
        >
          <Box
            color="text.neutral.100"
            fontSize="32px"
            fontWeight="black"
            lineHeight="10"
          >
            {title2}
          </Box>
          <Box
            w="520px"
            color="text.neutral.100"
            fontSize="16px"
            fontWeight="normal"
            lineHeight="normal"
            className="w-[520px] text-neutral-100 text-[16px] font-normal leading-normal"
          >
            {description2}
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

export default TwoCardsSideBySide;