import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { useNavigation } from "@react-navigation/native";
import LucideIcon from './LucideIcon';
import { responsiveFontSize } from "react-native-responsive-dimensions";
import { useTheme } from "../../hooks/ui/useTheme";
import FontsFamily from "../../constents/FontsFamily";

type HeaderProps = {
  title: string;
  showBack?: boolean; // optional, default true
  onBackPress?: () => void; // optional custom back action
  rightAction?: React.ReactNode; // allow passing JSX for right side
  titleColor?:string;
  arrowColor?:string
};

const Header: React.FC<HeaderProps> = ({
  title,
  showBack = true,
  onBackPress,
  rightAction,
  titleColor,
  arrowColor
}) => {
  const navigation = useNavigation();
  const theme = useTheme();

  const resolvedTitleColor = titleColor || theme.colors.textPrimary;
  const resolvedArrowColor = arrowColor || theme.colors.textPrimary;

  const handleBack = () => {
    if (onBackPress) {
      onBackPress();
    } else {
      navigation.goBack();
    }
  };

  return (
    <View style={styles.header}>
      {showBack && (
        <TouchableOpacity onPress={handleBack} style={styles.sideAction}>
          <LucideIcon name="arrow-back" size={22} color={resolvedArrowColor} />
        </TouchableOpacity>
      )}
      {!showBack && <View style={styles.sideAction} />}

      <Text numberOfLines={1} style={[styles.headerTitle, {color:resolvedTitleColor}]}>{title}</Text>

      <View style={styles.sideAction}>{rightAction}</View>
    </View>
  );
};

export default Header;

const styles = StyleSheet.create({
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingVertical: 10,
    paddingHorizontal: 12,
  },
  sideAction: {
    width: 36,
    height: 36,
    alignItems: "center",
    justifyContent: "center",
  },
  headerTitle: {
    flex: 1,
    textAlign: "center",
    fontSize: responsiveFontSize(2),
    fontFamily: FontsFamily.nunitoBold,
  },
});