import { Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import type { PressableProps } from 'react-native';
import type { ComponentProps } from 'react';

type Props = PressableProps & {
  name: ComponentProps<typeof Ionicons>['name'];
  size?: number;
  color?: string;
  className?: string;
  badge?: number;
};

export function IconButton({
  name,
  size = 22,
  color = '#0a0a0a',
  className = '',
  badge,
  ...rest
}: Props) {
  return (
    <Pressable
      className={`w-10 h-10 rounded-full items-center justify-center ${className}`}
      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
      {...rest}
    >
      <Ionicons name={name} size={size} color={color} />
    </Pressable>
  );
}