import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { RatingStarsProps } from './ratingStars.props';
import { getStyles } from './ratingStars.styles';

export const RatingStars: React.FC<RatingStarsProps> = ({
  rating,
  onRate,
  size = 32,
}) => {
  const styles = getStyles();

  return (
    <View style={styles.container}>
      {[1, 2, 3, 4, 5].map((star) => (
        <TouchableOpacity
          key={star}
          onPress={() => onRate?.(star)}
          disabled={!onRate}
          activeOpacity={0.7}
        >
          <Text style={[styles.star, { fontSize: size }]}>
            {star <= rating ? '⭐' : '☆'}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};