import React from "react";
import { View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColors } from "@/hooks/useColors";

interface Props {
  value: number;
  size?: number;
}

export default function StarRating({ value, size = 14 }: Props) {
  const colors = useColors();
  const rounded = Math.round(value);
  return (
    <View style={{ flexDirection: "row", gap: 1 }}>
      {[1, 2, 3, 4, 5].map((s) => (
        <Ionicons
          key={s}
          name={s <= rounded ? "star" : "star-outline"}
          size={size}
          color={s <= rounded ? colors.accent : colors.border}
        />
      ))}
    </View>
  );
}