import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { COLORS } from '../constants/color';
  import { HeaderProps } from '../types/type';
  import { styles } from '../styles/HeaderStyles';



export default function Header({
  userName,
  locationName,
  badgeCount = 0,
}: HeaderProps) {
  return (
    <View style={styles.container}>

      <View>

        <Text style={styles.greeting}>
          Good morning, {userName}
        </Text>

        <TouchableOpacity style={styles.locationContainer}>
          <Text style={styles.location}>
            {locationName}
          </Text>

          <Ionicons
            name="chevron-down"
            size={20}
            color={COLORS.textSecondary}
          />
        </TouchableOpacity>

      </View>

      <TouchableOpacity style={styles.notificationBtn}>

        <Ionicons
          name="notifications-outline"
          size={24}
          color={COLORS.textPrimary}
        />

        {badgeCount > 0 && (
          <View style={styles.badge}>
            <Text style={styles.badgeText}>
              {badgeCount}
            </Text>
          </View>
        )}

      </TouchableOpacity>

    </View>
  );
}