import { AddIcon, MinusIcon } from "@chakra-ui/icons";
import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Box,
  Container,
  Text,
} from "@chakra-ui/react";

export const faq = [
  {
    question: "How do I get started with your app?",
    answer:
      "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.",
  },
  {
    question: "How do I get started with your app?",
    answer:
      "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.",
  },
  {
    question: "How do I get started with your app?",
    answer:
      "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.",
  },
  {
    question: "How do I get started with your app?",
    answer:
      "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.",
  },
  {
    question: "How do I get started with your app?",
    answer:
      "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.",
  },
  {
    question: "How do I get started with your app?",
    answer:
      "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.",
  },
];

const Faq = () => {
  return (
    <Box
    id="faq"
      position={"relative"}
      backgroundColor={"#ffffff"}
      h={"120vh"}
      mt={28}
      mb={10}
    >
      <Container
        display={"flex"}
        flexDirection={"column"}
        maxW="container.xl"
        h={"100%"}
        p={4}
      >
        <Text
          mt={10}
          fontSize={34}
          fontWeight={"bold"}
          fontFamily={"Roca Two"}
          as={"h3"}
          textAlign={"center"}
          w={"100%"}
        >
          Frequently asked questions
        </Text>
        <Text
        mt={2}
          fontSize={"lg"}
          fontWeight={"400"}
          color={"gray.500"}
          as={"h3"}
          textAlign={"center"}
          w={"100%"}
        >
          Everything you need to know about the property investment.
        </Text>

        <Box w={"100%"} h={"100%"} p={44} pt={16} pb={0}>
         
            <Accordion allowToggle>
            {faq.map(({ question, answer }, index) => (
              <AccordionItem>
                {({ isExpanded }) => (
                  <>
                    <AccordionButton
                    key={index}
                      _expanded={{ bg: "", color: "" }}
                      ps={0}
                      pt={6}
                      pb={6}
                    >
                      <Box
                        as="span"
                        flex="1"
                        textAlign="left"
                        fontSize={21}
                        fontWeight={"bold"}
                        fontFamily={"Roca Two"}
                      >
                        {question}
                      </Box>
                      {isExpanded ? (
                        <MinusIcon
                          fontSize="24px"
                          border={"2px solid #004118"}
                          color={"#004118"}
                          rounded={"full"}
                          p={1}
                        />
                      ) : (
                        <AddIcon
                          fontSize="24px"
                          border={"2px solid #004118"}
                          color={"#004118"}
                          rounded={"full"}
                          p={1}
                        />
                      )}
                    </AccordionButton>
                    <AccordionPanel
                      fontSize={"md"}
                      fontWeight={400}
                      color={"gray.500"}
                      ps={0}
                      pe={20}
                    >
                      {answer}
                    </AccordionPanel>
                  </>
                )}
              </AccordionItem>
              
          ))}
            </Accordion>
        </Box>
      </Container>
    </Box>
  );
};

export default Faq;
