import Styles from '@/constants/Styles';
import { useRouter } from 'expo-router';
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 router = useRouter();

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

        <Text style={Styles.headerTitle}>{title}</Text>

        <View style={Styles.headerSide}>{right}</View>
      </View>
    </View>
  );
}
