/*
 * File: IconButton.tsx
 * Description: Themed icon button using Clinical Blue Interface design system
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { TouchableOpacity, StyleSheet, ViewStyle, GestureResponderEvent } from 'react-native';
import CustomIcon from './CustomIcon';
import { Colors, Spacing, BorderRadius } from '../../theme';

interface IconButtonProps {
  name: string;
  size?: number;
  color?: string;
  onPress: (event: GestureResponderEvent) => void;
  style?: ViewStyle;
  disabled?: boolean;
}

/**
 * IconButton component
 * - Renders a touchable icon with theme styling
 */
const IconButton: React.FC<IconButtonProps> = ({ name, size = 24, color = Colors.primary, onPress, style, disabled }) => (
  <TouchableOpacity
    style={[styles.button, style, disabled && styles.disabled]}
    onPress={onPress}
    activeOpacity={0.7}
    disabled={disabled}
  >
    <CustomIcon name={name} size={size} color={disabled ? Colors.inactiveState : color} />
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  button: {
    padding: Spacing.sm,
    borderRadius: BorderRadius.md,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.backgroundAlt,
  },
  disabled: {
    opacity: 0.5,
  },
});

export default IconButton;

/*
 * End of File: IconButton.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */ 