managarten/picture/packages/mobile-ui/components/navigation/HeaderButton/HeaderButton.tsx

import React from 'react';
import { Pressable, ViewStyle, PressableProps } from 'react-native';
import { Icon } from '../../ui/Icon';

export type HeaderButtonProps = {
  /** Icon name */
  icon: string;
  /** Press handler */
  onPress: () => void;
  /** Icon size */
  size?: number;
  /** Icon color */
  iconColor?: string;
  /** Button is disabled */
  disabled?: boolean;
  /** Additional styles */
  style?: ViewStyle;
  /** Hit slop for better touch target */
  hitSlop?: PressableProps['hitSlop'];
};

export function HeaderButton({
  icon,
  onPress,
  size = 24,
  iconColor = '#6B7280',
  disabled = false,
  style,
  hitSlop = { top: 10, bottom: 10, left: 10, right: 10 },
}: HeaderButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      hitSlop={hitSlop}
      style={({ pressed }) => [
        {
          padding: 8,
          opacity: disabled ? 0.4 : pressed ? 0.7 : 1,
        },
        style,
      ]}
    >
      <Icon name={icon} size={size} color={iconColor} />
    </Pressable>
  );
}