import ImageLoader from "@/components/ui/ImageLoader";
import StarRating from "@/components/ui/star-rating";
import { Text, View } from "react-native";

interface ReviewCardProps {
  rating: number;
  full_name: string;
  comment: string;
  avatar?: string;
}

export default function ReviewCard({
  rating,
  full_name,
  comment,
  avatar,
}: ReviewCardProps) {
  return (
    <View className="bg-white border border-slate-100 rounded-2xl p-4 shadow-sm">
      <View className="flex-row items-center justify-between mb-4">
        <View className="flex-row items-center gap-3">
          <View className="border-2 border-slate-50 rounded-full p-0.5">
            <ImageLoader
              src={avatar}
              width={40}
              height={40}
              className="rounded-full size-10"
            />
          </View>
          <View>
            <Text className="text-sm font-manrope-extrabold text-slate-900">{full_name}</Text>
            <View className="flex-row items-center gap-1 mt-0.5">
               <StarRating rating={rating} />
            </View>
          </View>
        </View>
      </View>
      
      <View className="relative px-2">
        <Text className="text-slate-600 font-manrope-medium text-sm leading-6 italic">
          &ldquo;{comment}&rdquo;
        </Text>
      </View>
    </View>
  );
}
