import { Pressable, StyleSheet } from 'react-native';
import { AppIcon, type AppIconName, APP_ICON_SIZE } from './app-icon';
import { m3Colors, spacing } from '../theme/proulr-theme';

type AppChromeIconButtonProps = {
  label: string;
  icon: AppIconName;
  onPress?: () => void;
  disabled?: boolean;
  color?: string;
  size?: number;
  /** Header chrome pill — circular bordered target. */
  variant?: 'header' | 'plain';
};

export function AppChromeIconButton({
  label,
  icon,
  onPress,
  disabled,
  color = m3Colors.primary,
  size = APP_ICON_SIZE.chromeHeader,
  variant = 'header',
}: AppChromeIconButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled || !onPress}
      hitSlop={8}
      accessibilityRole="button"
      accessibilityLabel={label}
      style={[
        variant === 'header' ? styles.headerBtn : styles.plainBtn,
        disabled && styles.disabled,
      ]}
    >
      <AppIcon name={icon} color={color} size={size} />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  headerBtn: {
    width: 45,
    height: 45,
    borderRadius: 22.5,
    borderWidth: 2,
    borderColor: 'rgba(255,255,255,0.22)',
    margin: spacing.xs,
    alignItems: 'center',
    justifyContent: 'center',
  },
  plainBtn: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  disabled: {
    opacity: 0.4,
  },
});