/**
 * IconButton — круглая touch-target кнопка под Ionicon.
 *
 * Три варианта:
 *   - 'ghost'  — прозрачная, используется в хедере (шестерёнка, back).
 *   - 'solid'  — акцентный заливной круг, например composer FAB.
 *   - 'tile'   — квадратная заливка 36×36 для небольших action-chip'ов.
 *
 * Размер управляется props.size (диаметр). Touch-target никогда меньше 40px
 * (accessibility), поэтому для size<40 внутренний иконопад растёт.
 */
import React from 'react';
import { Pressable, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

type IoniconName = React.ComponentProps<typeof Ionicons>['name'];

export interface IconButtonProps {
  icon: IoniconName;
  onPress?: () => void;
  variant?: 'ghost' | 'solid' | 'tile';
  size?: number;        // visual diameter; hit slop ensures accessibility
  color?: string;       // override icon color
  disabled?: boolean;
  className?: string;
}

export function IconButton({
  icon, onPress, variant = 'ghost', size = 40, color, disabled, className,
}: IconButtonProps) {
  const iconSize = Math.round(size * 0.5);
  const bg =
    variant === 'solid' ? '#1d9bf0' :
    variant === 'tile'  ? '#1a1a1a' :
                          'transparent';
  const tint =
    color ??
    (variant === 'solid' ? '#ffffff' :
     disabled            ? '#3a3a3a' :
                           '#e7e7e7');

  const radius = variant === 'tile' ? 10 : size / 2;

  return (
    <Pressable
      onPress={disabled ? undefined : onPress}
      hitSlop={8}
      className={className}
      style={({ pressed }) => ({
        width: size,
        height: size,
        borderRadius: radius,
        backgroundColor: pressed && !disabled ? (variant === 'solid' ? '#1a8cd8' : '#1a1a1a') : bg,
        alignItems: 'center',
        justifyContent: 'center',
      })}
    >
      <Ionicons name={icon} size={iconSize} color={tint} />
    </Pressable>
  );
}