import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { ArrowLeft } from 'lucide-react';
import { router } from 'expo-router';
import { Colors, Spacing, FontSize, Layout } from '@/constants/theme';

interface CommonHeaderProps {
  title: string;
  showBack?: boolean;
  onBack?: () => void;
  rightContent?: React.ReactNode;
  backgroundColor?: string;
}

export const CommonHeader: React.FC<CommonHeaderProps> = ({
  title,
  showBack = true,
  onBack,
  rightContent,
  backgroundColor = '#FFFFFF',
}) => {
  const handleBackPress = () => {
    if (onBack) {
      onBack();
      return;
    }
    router.back();
  };

  return (
    <View style={[styles.container, { backgroundColor }]}>
      <View style={styles.content}>
        <View style={styles.leftArea}>
          {showBack && (
            <TouchableOpacity
              onPress={handleBackPress}
              style={styles.backButton}
              activeOpacity={0.7}
            >
              <ArrowLeft size={24} color="#007AFF" strokeWidth={2.5} />
            </TouchableOpacity>
          )}
        </View>

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

        <View style={styles.rightArea}>
          {rightContent}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: Layout.headerHeight,
    borderBottomWidth: 0,
    borderBottomColor: Colors.border,
  },
  content: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: Spacing.md,
  },
  leftArea: {
    width: 40,
    height: '100%',
    justifyContent: 'center',
  },
  backButton: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  centerArea: {
    flex: 1,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: Spacing.sm,
  },
  title: {
    fontSize: FontSize.lg,
    fontWeight: '600',
    color: Colors.text.primary,
    textAlign: 'center',
  },
  rightArea: {
    width: 40,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
});

export default CommonHeader;