import React from 'react';
import {View} from 'react-native';
import {Accordion, Typography} from '@components';
import {FaqItem} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {AnimatedCardEntrance} from '../AnimatedCardEntrance';
import {styles} from './styles';

interface Props {
  items: FaqItem[];
}

export function FAQAccordion({items}: Props) {
  const {theme} = useTheme();

  return items?.length > 0 ? (
    <View style={styles.container}>
      {items.map((item, index) => (
        <AnimatedCardEntrance key={`${item.question}-${index}`} index={index}>
          <Accordion initialCollapsed={false}>
            <Accordion.Header>
              <Typography variant="s" weight="semiBold" style={styles.question}>
                {item.question}
              </Typography>
              <Accordion.Icon />
            </Accordion.Header>
            <Accordion.Content>
              <Typography variant="xs" color={theme.text.neutral.lighter}>
                {item.answer}
              </Typography>
            </Accordion.Content>
          </Accordion>
        </AnimatedCardEntrance>
      ))}
    </View>
  ) : null;
}