import { Badge, HStack, Spinner, Stack, Text, VStack } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame";
import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
import { useGetTermsQuery } from "../../../Redux/Service/terms.and.condition.service";

const TermsAndConditions = () => {
  const { data, refetch, isLoading, isFetching } = useGetTermsQuery();

  console.log(data);

  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"}>
            Terms and Conditions
          </Text>
        </Stack>

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

                {/* Pass Data to AboutUsAddModel */}
                <TermsAndConditionsAddModel
                  termsData={{ id, content, terms_cond_language }}
                  refetch={refetch}
                />
              </HStack>
              <Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
                {/* {content} */}
                <div dangerouslySetInnerHTML={{ __html: content }} />
              </Text>
            </VStack>
          ))
        )}
      </VStack>
    </MainFrame>
  );
};
export default TermsAndConditions;
