import React from 'react';
import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { borderRadius, colors, spacing } from '../../theme';

type AppBackButtonIcon = 'arrow-left' | 'close';

interface AppBackButtonProps {
  onPress: () => void;
  icon?: AppBackButtonIcon;
  style?: StyleProp<ViewStyle>;
  iconColor?: string;
  backgroundColor?: string;
  hitSlop?: number;
  testID?: string;
}

const AppBackButton: React.FC<AppBackButtonProps> = ({
  onPress,
  icon = 'arrow-left',
  style,
  iconColor = colors.text.primary,
  backgroundColor = colors.background.paper,
  hitSlop = 8,
  testID,
}) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.button, { backgroundColor }, style]}
      activeOpacity={0.75}
      hitSlop={hitSlop}
      testID={testID}
      accessibilityRole="button"
      accessibilityLabel={icon === 'close' ? '关闭' : '返回'}
    >
      <MaterialCommunityIcons name={icon} size={22} color={iconColor} />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    width: 36,
    height: 36,
    borderRadius: borderRadius.full,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: spacing.xs,
  },
});

export default AppBackButton;