// import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
// import MainFrame from "../../../components/MainFrame"
// import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
// import { Spinner } from "../../../components/Sipnner/Spinner";
// import GlobalStateContext from "../../../Contexts/GlobalStateContext";
// import { useContext, useEffect } from "react";
// import AboutUsAddModel from "./AboutUsAddModel";



// const AboutUs = () => {

//   const { data, isLoading, isFetching } = useGetAboutUsQuery();

//   // const content = data?.data
//   console.log('====================================');
//   console.log(data);
//   console.log('====================================');

//   const context = useContext(GlobalStateContext);
//   if (!context) throw new Error('App must be used within a GlobalStateProvider');

//   const { setIsBarLoading } = context;
//   useEffect(() => {
//     setIsBarLoading(isFetching)
//   }, [data])

//   return (
//     <MainFrame transperant={true}>
//       <VStack gap={4} pb={4} pt={0}>
//         {isLoading || isFetching ?
//           <Spinner /> : data?.data?.map(({ id, content, about_language }) => <VStack bg={'#fff'}
//             boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
//             <HStack
//               w={"100%"}
//               justifyContent={"space-between"}

//               py={0}
//               px={0}
//             >
//               <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
//                 About Us <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {about_language?.language_name}</Badge>
//               </Text>

//               {/* <AboutUsAddModel /> */}
//               <AboutUsAddModel/>
//             </HStack>
//             <Text
//               as="p"
//               fontSize="sm"
//               fontWeight={400}
//               color="#1D1D1D"
//             >
//               {content}
//             </Text>

//           </VStack>)}
//       </VStack>
//     </MainFrame>
//   )
// }
// export default AboutUs

import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame";
import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
import { Spinner } from "../../../components/Sipnner/Spinner";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useContext, useEffect } from "react";
import AboutUsAddModel from "./AboutUsAddModel";

const AboutUs = () => {
  const { data, isLoading, isFetching } = useGetAboutUsQuery();

  console.log("Fetched About Us Data:", data);

  const context = useContext(GlobalStateContext);
  if (!context) throw new Error("App must be used within a GlobalStateProvider");

  const { setIsBarLoading } = context;
  useEffect(() => {
    setIsBarLoading(isFetching);
  }, [isFetching, setIsBarLoading]);

  return (
    <MainFrame transperant={true}>
      <VStack gap={4} pb={4} pt={0}>
        <Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} >             About Us
        </Text></Stack>

        {isLoading || isFetching ? (
          <Spinner />
        ) : (
          data?.data?.map(({ id, content, about_language }) => (
            <VStack
              bg={"#fff"}
              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
              rounded={"lg"}
              p={3}
              key={id}
            >

              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
                <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
                  <Badge
                    variant={"surface"}
                    colorPalette="cyan"
                    ms={2}
                    size={"sm"}
                    fontSize={"xs"}
                    px={2}
                  >
                    🎓 {about_language?.language_name}
                  </Badge>
                </Text>

                {/* Pass Data to AboutUsAddModel */}
                <AboutUsAddModel aboutUsData={{ id, content, about_language }} />
              </HStack>
              <Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
                {/* {content} */}
                <div dangerouslySetInnerHTML={{ __html: content }} />
              </Text>
            </VStack>
          ))
        )}
      </VStack>
    </MainFrame>
  );
};

export default AboutUs;
