import * as React from 'react';
import { Pressable, PressableProps, View } from 'react-native';
import { SmallDotIcon } from './icons/small-dot';

interface IconButtonProps extends Omit<PressableProps, 'children'> {
  icon: React.ReactNode;
  onPress?: () => void;
  required?: boolean;
  className?: string;
  activeOpacity?: number;
}

const IconButton = React.memo(
  ({
    icon,
    required = false,
    hitSlop,
    activeOpacity = 0.7,
    ...restProps
  }: IconButtonProps) => {
    return (
      <Pressable
        hitSlop={hitSlop}
        style={[
          {
            position: 'relative',
          },
        ]}
        // android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
        {...restProps}
      >
        {({ pressed }) => (
          <View style={{ opacity: pressed ? activeOpacity : 1 }}>
            {icon}
            {required && (
              <View
                style={{
                  position: 'absolute',
                  right: -2,
                  top: -2,
                }}
              >
                <SmallDotIcon />
              </View>
            )}
          </View>
        )}
      </Pressable>
    );
  },
);

export default IconButton;