rebreak-monorepo/apps/rebreak-native/components/FaqAccordion.tsx

import { useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../lib/theme';

/**
 * Shared FAQ Accordion-Komponente.
 *
 * Nutzung:
 *   <FaqAccordion items={[{ q: t('help.faq_q1'), a: t('help.faq_a1') }, ...]} />
 *
 * Varianten:
 *   - 'card'    (default) — gruppiert in einer Card mit Trennlinien zwischen Zeilen,
 *                            so wie auf der Settings → FAQ-Seite (iOS-Listen-Pattern).
 *   - 'pills'   — jede Frage als eigene pill-Card, kompakt für inline-Embeds
 *                  (z.B. End-of-Onboarding Top-5-Block).
 *
 * Eltern hat die Verantwortung für padding/marginHorizontal/ScrollView-Wrap. Die
 * Komponente kümmert sich NUR um Rendering der Zeilen + Expand/Collapse-State.
 */

export type FaqItem = { q: string; a: string };

type Variant = 'card' | 'pills';

export function FaqAccordion({
  items,
  variant = 'card',
}: {
  items: FaqItem[];
  variant?: Variant;
}) {
  const colors = useColors();

  if (variant === 'pills') {
    return (
      <View style={{ gap: 8 }}>
        {items.map((item, i) => (
          <PillRow key={i} q={item.q} a={item.a} />
        ))}
      </View>
    );
  }

  return (
    <View
      style={{
        backgroundColor: colors.card,
        borderRadius: 14,
        overflow: 'hidden',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.04,
        shadowRadius: 3,
        elevation: 1,
      }}
    >
      {items.map((item, i) => (
        <CardRow
          key={i}
          q={item.q}
          a={item.a}
          isLast={i === items.length - 1}
        />
      ))}
    </View>
  );
}

function CardRow({ q, a, isLast }: { q: string; a: string; isLast: boolean }) {
  const colors = useColors();
  const [open, setOpen] = useState(false);
  return (
    <View
      style={{
        borderBottomWidth: isLast ? 0 : 1,
        borderBottomColor: colors.border,
      }}
    >
      <TouchableOpacity
        onPress={() => setOpen((v) => !v)}
        activeOpacity={0.7}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: 16,
          paddingVertical: 14,
          gap: 12,
        }}
      >
        <Text
          style={{
            flex: 1,
            fontSize: 15,
            fontFamily: 'Nunito_600SemiBold',
            color: colors.text,
            lineHeight: 21,
          }}
        >
          {q}
        </Text>
        <Ionicons
          name={open ? 'chevron-up' : 'chevron-down'}
          size={18}
          color={colors.textMuted}
        />
      </TouchableOpacity>
      {open ? (
        <Text
          style={{
            paddingHorizontal: 16,
            paddingBottom: 16,
            fontSize: 14,
            fontFamily: 'Nunito_400Regular',
            color: colors.textMuted,
            lineHeight: 21,
          }}
        >
          {a}
        </Text>
      ) : null}
    </View>
  );
}

function PillRow({ q, a }: { q: string; a: string }) {
  const colors = useColors();
  const [open, setOpen] = useState(false);
  return (
    <View
      style={{
        backgroundColor: colors.surfaceElevated,
        borderRadius: 12,
        paddingVertical: 12,
        paddingHorizontal: 14,
      }}
    >
      <TouchableOpacity
        onPress={() => setOpen((v) => !v)}
        activeOpacity={0.7}
        style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
      >
        <Text
          style={{
            flex: 1,
            fontFamily: 'Nunito_600SemiBold',
            fontSize: 13,
            lineHeight: 19,
            color: colors.text,
          }}
        >
          {q}
        </Text>
        <Ionicons
          name={open ? 'chevron-up' : 'chevron-down'}
          size={16}
          color={colors.textMuted}
        />
      </TouchableOpacity>
      {open ? (
        <Text
          style={{
            marginTop: 8,
            paddingTop: 8,
            borderTopWidth: 1,
            borderTopColor: 'rgba(0,0,0,0.06)',
            fontFamily: 'Nunito_400Regular',
            fontSize: 13,
            lineHeight: 19,
            color: colors.textMuted,
          }}
        >
          {a}
        </Text>
      ) : null}
    </View>
  );
}