import { BackButton } from '@/components/ui/back-button';
import { router } from 'expo-router';
import React, { ReactNode } from 'react';
import { StyleSheet, Text, View } from 'react-native';

type HeaderProps = {
  title: string;
  onBack?: () => void;
  rightElement?: ReactNode;
};

export function Header({ title, onBack = () => router.back(), rightElement }: HeaderProps) {
  return (
    <View style={styles.container}>
      <BackButton onPress={onBack} />

      <Text style={styles.title} numberOfLines={1}>
        {title}
      </Text>

      {rightElement ?? <View style={styles.placeholder} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 0,
    paddingTop: 8,
    paddingBottom: 8,
    gap: 12,
  },
  title: {
    flex: 1,
    textAlign: 'center',
    fontSize: 18,
    fontWeight: '600',
    color: '#FFFFFF',
    letterSpacing: 0.4,
  },
  placeholder: {
    width: 48,
    height: 48,
  },
});