import { ScrollView, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { AppHeader } from '../../components/AppHeader';
import { FaqAccordion, type FaqItem } from '../../components/FaqAccordion';

export default function FaqScreen() {
  const { t } = useTranslation();
  const colors = useColors();
  const insets = useSafeAreaInsets();

  const items: FaqItem[] = [
    { q: t('help.faq_q1'), a: t('help.faq_a1') },
    { q: t('help.faq_q2'), a: t('help.faq_a2') },
    { q: t('help.faq_q3'), a: t('help.faq_a3') },
    { q: t('help.faq_q4'), a: t('help.faq_a4') },
    { q: t('help.faq_q5'), a: t('help.faq_a5') },
    { q: t('help.faq_q6'), a: t('help.faq_a6') },
    { q: t('help.faq_q7'), a: t('help.faq_a7') },
    { q: t('help.faq_q8'), a: t('help.faq_a8') },
  ];

  return (
    <View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
      <AppHeader showBack title={t('help.faq_title')} />

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          paddingHorizontal: 16,
          paddingTop: 20,
          paddingBottom: insets.bottom + 40,
        }}
        showsVerticalScrollIndicator={false}
      >
        <FaqAccordion items={items} />
      </ScrollView>
    </View>
  );
}