import React from 'react';
import { FlatList, ScrollView } from 'react-native';
import type { Styles } from './styles';
import themedStyles from './styles';
import { safeWithTheme } from '../../../branding';
import type { ThemeProps } from '../../../branding/hoc/types';
import DebugSectionItem from '../SectionItem/DebugSectionItem';
import DebugListItem from '../ListItem/DebugListItem';

export interface Props {
    name: string;
    items: string[];
}

const DebugSection = ({ name, items, theme }: Props & ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;
    return (
        <ScrollView contentContainerStyle={styles.container}>
            <DebugSectionItem text={name} />
            <FlatList
                keyExtractor={(item, index) => `${index}_${item}`}
                data={items}
                renderItem={item => <DebugListItem text={item.item} />}
                style={styles.section}
            />
        </ScrollView>
    );
};

export default safeWithTheme(DebugSection);