// template/src/components/Header/index.ts
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useTheme } from '../../theme/ThemeProvider';
import { createHeaderStyles } from './styles';
import { Icon } from '../Icon';
import { ThemedText } from '@components/ThemedText';

interface HeaderProps {
    userName?: string;
    greeting?: string;
    notificationCount?: number;
    onLogout: () => void;
}

const Header: React.FC<HeaderProps> = ({
    userName = 'User',
    greeting = 'Hi',
    notificationCount = 0,
    onLogout
}) => {
    const { theme } = useTheme();
    const styles = createHeaderStyles(theme);

    return (
        <View style={styles.header}>
            <View style={styles.headerLeft}>
                <Icon
                    d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
                />
            </View>

            <View style={styles.headerCenter}>
                <ThemedText variant="heading" style={{ fontSize: 18 }}>
                    {greeting} {userName}
                </ThemedText>
            </View>

            <View style={styles.headerRight}>
                <View style={styles.headerRight}>
                    <View style={styles.rightIcons}>
                        <TouchableOpacity onPress={onLogout} style={styles.logoutButton}>
                            {/* <Text style={styles.logoutText}>Logout</Text> */}
                            <Icon name="support" />
                        </TouchableOpacity>

                        {/* Add your second icon here */}
                        <TouchableOpacity onPress={onLogout} style={styles.logoutButton}>
                            <Icon name="settings" />
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </View>
    );
};

export default Header;