digital-pilates/components/ui/HeaderBar.tsx

import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export type HeaderBarProps = {
  title: string | React.ReactNode;
  onBack?: () => void;
  backColor?: string;
  right?: React.ReactNode;
  tone?: 'light' | 'dark';
  showBottomBorder?: boolean;
  withSafeTop?: boolean;
  transparent?: boolean;
  variant?: 'default' | 'elevated' | 'minimal';
};

export function HeaderBar({
  title,
  onBack,
  backColor,
  right,
  tone,
  showBottomBorder = false,
  withSafeTop = true,
  transparent = true,
  variant = 'default',
}: HeaderBarProps) {
  const insets = useSafeAreaInsets();
  const colorScheme = useColorScheme() ?? 'light';
  const theme = Colors[tone ?? colorScheme];

  // 根据变体确定背景色和样式
  const getBackgroundColor = () => {
    if (transparent) return 'transparent';

    switch (variant) {
      case 'elevated':
        return theme.background;
      case 'minimal':
        return theme.background;
      default:
        return theme.card;
    }
  };

  const getBorderStyle = () => {
    if (!showBottomBorder) return {};

    return {
      borderBottomWidth: 1,
      borderBottomColor: variant === 'elevated'
        ? theme.border
        : `${theme.border}40`, // 40% 透明度
    };
  };

  return (
    <View
      style={[
        styles.header,
        {
          paddingTop: (withSafeTop ? insets.top : 0) + 8,
          backgroundColor: getBackgroundColor(),
          ...getBorderStyle(),
          ...(variant === 'elevated' && {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.05,
            shadowRadius: 3,
            elevation: 2,
          }),
        },
      ]}
    >
      {onBack ? (
        <TouchableOpacity
          accessibilityRole="button"
          onPress={onBack}
          style={styles.backButton}
          activeOpacity={0.7}
        >
          <Ionicons
            name="chevron-back"
            size={24}
            color={backColor || theme.text}
          />
        </TouchableOpacity>
      ) : (
        <View style={{ width: 32 }} />
      )}

      <View style={styles.titleContainer}>
        {typeof title === 'string' ? (
          <Text style={[
            styles.title,
            {
              color: theme.text,
              fontWeight: variant === 'elevated' ? '700' : '800',
            }
          ]}>
            {title}
          </Text>
        ) : (
          title
        )}
      </View>

      {right ?? <View style={{ width: 32 }} />}
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingBottom: 12,
    minHeight: 44,
    width: '100%',
  },
  backButton: {
    width: 32,
    height: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 8,
  },
  title: {
    fontSize: 18,
    textAlign: 'center',
    letterSpacing: -0.3,
  },
});