import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { CategoryChipProps } from './categoryChip.props';
import { getStyles } from './categoryChip.styles';
import { useAppTheme } from '@theme';

export const CategoryChip: React.FC<CategoryChipProps> = ({
  icon,
  label,
  isSelected,
  onPress,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <TouchableOpacity
      style={[styles.container, isSelected && styles.selected]}
      onPress={onPress}
      activeOpacity={0.7}
    >
      <Text style={styles.icon}>{icon}</Text>
      <Text style={[styles.label, isSelected && styles.labelSelected]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
};