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:
*
*
* 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 (
{items.map((item, i) => (
))}
);
}
return (
{items.map((item, i) => (
))}
);
}
function CardRow({ q, a, isLast }: { q: string; a: string; isLast: boolean }) {
const colors = useColors();
const [open, setOpen] = useState(false);
return (
setOpen((v) => !v)}
activeOpacity={0.7}
style={{
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 14,
gap: 12,
}}
>
{q}
{open ? (
{a}
) : null}
);
}
function PillRow({ q, a }: { q: string; a: string }) {
const colors = useColors();
const [open, setOpen] = useState(false);
return (
setOpen((v) => !v)}
activeOpacity={0.7}
style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}
>
{q}
{open ? (
{a}
) : null}
);
}