import { View, Text } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../theme";

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

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

  return (
    <View
      accessible
      accessibilityLabel={`${value.toFixed(1)} ѕвезди${count !== undefined ? `, ${count} оцени` : ""}`}
      style={{ flexDirection: "row", alignItems: "center", gap: 3 }}
    >
      <Ionicons name="star" size={size} color={theme.colors.star} />
      <Text style={{ ...theme.typography.bodyBold, color: theme.colors.text, fontVariant: ["tabular-nums"] as any, fontSize: size - 2 }}>
        {value.toFixed(1)}
      </Text>
      {count !== undefined && (
        <Text style={{ ...theme.typography.caption, color: theme.colors.textTertiary, fontSize: size - 4 }}>
          ({count})
        </Text>
      )}
    </View>
  );
}
