import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame"
import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
import {useGetTermsAndConditionQuery} from "../../../Redux/Service/terms.and.condition.service"
import { useContext, useEffect } from "react";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { Spinner } from "../../../components/Sipnner/Spinner";


const TermsAndConditions = () => {
  
  // Fetch data using RTK Query with type annotations
    const { data, isLoading, isFetching } = useGetTermsAndConditionQuery();

    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, terms_cond_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"}>
              Terms And Conditions<Badge variant={'surface'}  colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {terms_cond_language?.language_name}</Badge>
              </Text>

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

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