import { useThemeColor } from '@/hooks/useThemeColor';
import { Info, MonitorCog } from 'lucide-react-native';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SettingsSection } from './SettingsSection';

export function AboutCard() {
    const colors = useThemeColor();

    return (
        <SettingsSection title="ABOUT">
            <View style={styles.rowGroup}>
                <Info size={18} color={colors.textMuted} style={styles.infoIcon} />
                <Text style={[styles.infoText, { color: colors.text }]}>LocalMind - Cross Platform Version</Text>
            </View>
            <View style={[styles.rowGroup, { marginTop: 8 }]}>
                <MonitorCog size={18} color={colors.textMuted} style={styles.infoIcon} />
                <Text style={[styles.infoText, { color: colors.textMuted, fontSize: 13 }]}>
                    Connected via OpenAPI `/v1/chat/completions` specs
                </Text>
            </View>
        </SettingsSection>
    );
}

const styles = StyleSheet.create({
    rowGroup: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    infoIcon: {
        marginRight: 10,
    },
    infoText: {
        fontSize: 15,
        lineHeight: 22,
    },
});