Untitled

import {
  Flex,
  GridItem,
  Heading,
  Text,
  useColorModeValue,
  Box,
  HStack,
  VStack,
} from "@chakra-ui/react";
import React, { useMemo } from "react";
import { IoIosHelpCircleOutline } from "react-icons/io";
const lightColors = [
  "#F0E68C",
  "#E6E6FA",
  "#FFFACD",
  "#FFE4E1",
  "#FFDAB9",
  "#B0E0E6",
  "#AFEEEE",
  "#FDB6C",
];

export function getRandomLightColor() {
  const randomIndex = Math.floor(Math.random() * lightColors.length);
  return lightColors[randomIndex];
}
function formatHeading(heading: string) {
  return heading.split("").reduce((result, char, index, array) => {
    if (index !== 0 && char === char.toUpperCase()) {
      if (
        !(array[index - 1] === array[index - 1].toUpperCase()) ||
        (array[index + 1] &&
          array[index + 1] === array[index + 1].toUpperCase())
      ) {
        return `${result} ${char}`;
      }
    }
    return result + char;
  }, "");
}
const SiteAnalyserGridItem = ({ heading, data }: any) => {
  const textColor = useColorModeValue("gray.800", "gray.200");
  const formattedHeading = formatHeading(heading);
  const bgColor = useMemo(() => getRandomLightColor(), []);
  return (
    // <GridItem
    //   maxW="255px"
    //   padding={"12px 10px"}
    //   borderRadius={"30px"}
    //   bg={"#FFFFFF"}
    // >

    // <Flex
    //   justify="center"
    //   align="center"
    //   h="170px"
    //   bg={bgColor}
    //   direction="column"
    //   borderRadius="xl"
    //   p={2}
    //   boxShadow="lg"
    // >
    <VStack
      bg={"#fff"}
      width={"244px"}
      h={"100%"}
      borderRadius={"29px"}
      padding={"14px 20px"}
      justify={"flex-start"}
      align={"flex-start"}
      gap={"8px"}
    >
      <HStack gap={"4px"}>
        <Text
          fontSize="16px"
          fontFamily={"DM Sans, sans-serif"}
          color={"#A3AED0"}
          fontWeight={"400"}
        >
          {formattedHeading}
        </Text>
        <IoIosHelpCircleOutline color="#5F7F9E" fontSize={"14px"} />
      </HStack>

      <Text
        lineHeight={"30px"}
        fontSize={"32px"}
        color={"#2B3674"}
        fontFamily={"DM Sans, sans-serif"}
      >
        {data}
      </Text>
    </VStack>
    // </Flex>
    // </GridItem>
  );
};

export default SiteAnalyserGridItem;