import Styles from '@/constants/Styles';
import { useTheme } from "@/providers/ThemeProvider";
import { Platform, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import ButtonBackHeader from './buttonBackHeader';

type Props = {
  title: string;
  right?: React.ReactNode;
  showBack?: boolean;
  onPressLeft?: () => void
  left?: React.ReactNode
};

export default function AppHeader({ title, right, showBack = true, onPressLeft, left }: Props) {
  const insets = useSafeAreaInsets();
  const { colors } = useTheme();

  return (
    <View style={[Styles.headerContainer, Platform.OS === 'ios' ? Styles.pb05 : Styles.pb13, { backgroundColor: colors.header, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
      <View style={Styles.headerApp}>
        <View style={[Styles.rowItemsCenter, Styles.flex1]}>
          {showBack ? (
            <ButtonBackHeader onPress={onPressLeft} />
          ) :
            left ? left :
              (
                <View style={Styles.headerSide} />
              )}

          <Text style={[Styles.headerTitle, Styles.ml05, Styles.flex1, Styles.mr10]} numberOfLines={1} ellipsizeMode="tail">
            {title ? title.charAt(0).toUpperCase() + title.slice(1) : ""}
          </Text>
        </View>
        <View style={Styles.headerSide}>{right}</View>
      </View>
    </View>
  );
}