import { StarIcon } from "phosphor-react-native";
import { Text, View } from "react-native";

interface StarRatingProps {
  rating: number;
  totalStars?: number;
  editable?: boolean;
  setRating?: (rating: number) => void;
  size?: number;
}

const StarRating = ({
  rating,
  totalStars = 5,
  editable = false,
  setRating,
  size = 16,
}: StarRatingProps) => {
  return (
    <View className="flex-row space-x-1 mb-4">
      {Array.from({ length: totalStars }, (_, idx) => {
        const starNumber = idx + 1;
        const isFilled = starNumber <= rating;

        return (
          <Text key={idx} onPress={() => editable && setRating?.(starNumber)}>
            <StarIcon
              size={size}
              weight="fill"
              color={isFilled ? "#ECA203" : "#d1d5db"}
            />
          </Text>
        );
      })}
    </View>
  );
};

export default StarRating;
