import { AddIcon, MinusIcon } from '@chakra-ui/icons'
import {
  Accordion,
  AccordionButton,
  AccordionItem,
  AccordionPanel,
  Box,
  Container,
  Heading,
  Text,
} from '@chakra-ui/react'
import React from 'react'
import { howItWorksContent } from './howItWorksContent'
import AnimatedScrollWrapper from '../AnimatedScrollWrapper'

export default function HowItWorksSection() {
  return (
    <AnimatedScrollWrapper>
      <Box px={4} my={24} maxW={'6xl'}>
        {/* @ts-ignore */}
        <a name='how-it-works'>
          <Heading fontSize={'3xl'} textAlign={'center'}>
            How It Works
          </Heading>
        </a>
        <Text color={'gray.600'} fontSize={'lg'} textAlign={'center'}>
          How it works is simple. You install the app on your Android device,
          and it will turn your device into a SMS Gateway. You can then use the
          API to send SMS messages from your own applications.
        </Text>

        <Container maxW={'6xl'} mt={10} pt={0}>
          <Accordion allowMultiple defaultIndex={[]}>
            {howItWorksContent.map(({ title, description }) => (
              <AccordionItem key={title}>
                {({ isExpanded }) => (
                  <>
                    <h2>
                      <AccordionButton>
                        <Box as='span' flex='1' textAlign='left'>
                          {title}
                        </Box>
                        {isExpanded ? (
                          <MinusIcon fontSize='12px' />
                        ) : (
                          <AddIcon fontSize='12px' />
                        )}
                      </AccordionButton>
                    </h2>
                    <AccordionPanel pb={4}>{description}</AccordionPanel>
                  </>
                )}
              </AccordionItem>
            ))}
          </Accordion>
        </Container>
      </Box>
    </AnimatedScrollWrapper>
  )
}
