import { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame"
import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";



const AboutUs = () => {

  const { data, isLoading } = useGetAboutUsQuery();

  const content = data?.data?.[0]?.content
  console.log('====================================');
  // console.log(response);
  console.log('====================================');


  return (

    <MainFrame>
      <Box pb={4}>
        <HStack
          w={"100%"}
          justifyContent={"space-between"}
          mb={4}
          py={0}
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
            AboutUs
          </Text>

          <HStack>

            <AboutUsAddModel />
          </HStack>
        </HStack>
        {/* Show Skeleton until content is available */}
        {isLoading || !content ? (
          <Box px={3} w="85%">
            <Skeleton height="20px" mb="10px" />
            <Skeleton height="20px" mb="10px" />
            <Skeleton height="20px" mb="10px" />
            <Skeleton height="20px" mb="10px" width="75%" />
            <Skeleton height="20px" mb="15px" width="90%" />
            <Skeleton height="20px" mb="10px" />
            <Skeleton height="20px" mb="10px" width="85%" />
            <Skeleton height="20px" mb="10px" />
            <Skeleton height="20px" width="70%" />
          </Box>
        ) : (
          <Text
            as="p"
            fontSize="sm"
            fontWeight={400}
            color="#1D1D1D"
            px={3}
            w="85%"
            mb="15px"
          >
            {content}
          </Text>
        )}
      </Box>
    </MainFrame>
  )
}
export default AboutUs