import { View, Text } from "react-native";
import { useTheme } from "../theme";

interface RatingProps {
  value: number;
  count?: number;
  size?: number;
}

export function Rating({ value, count, size = 16 }: RatingProps) {
  const theme = useTheme();

  return (
    <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
      <Text style={{ color: theme.colors.star, fontSize: size }}>★</Text>
      <Text style={{ color: theme.colors.textSecondary, fontSize: 14, fontVariant: ["tabular-nums"] }}>
        {value.toFixed(1)}
      </Text>
      {count !== undefined && (
        <Text style={{ color: theme.colors.textTertiary, fontSize: 12 }}>({count})</Text>
      )}
    </View>
  );
}