import { View, Text } from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
import Level from "../Level";

/*
comment参数格式：
    {
        name: "色批1号",
        head: "https://s2.loli.net/2023/09/14/7AoD2kQlrnNUPFS.jpg",
        level: "23",
        content: ["身材好", "声音好听", "态度好"],
        type: "good",
    }
 */

export default function ServiceComment({ comment }) {
  const tailwind = useTailwind();
  //计算标签颜色
  const handleColor = (item) => {
    switch (item) {
      case "身材好":
        return "#ef4444";
      case "声音好听":
        return "#facc15";
      case "态度好":
        return "#e879f9";
      case "缘分未到":
        return "#9ca3af";
      default:
        return "#a3e635";
    }
  };
  return (
    <View style={tailwind("flex-row items-center justify-between mt-2")}>
      <View style={tailwind("flex-row items-center")}>
        <Image
          style={tailwind("w-12 h-12 rounded-full")}
          source={comment.head}
          contentFit="cover"
          transition={1000}
          cachePolicy="disk"
        />
        <View style={tailwind("flex justify-around h-12")}>
          <Text style={tailwind("text-sm")}>{comment.name}</Text>
          <Level level={comment.level} />
        </View>
      </View>
      <View style={tailwind("flex-row items-center")}>
        {comment.content.map((item, index) => (
          <View
            key={index}
            style={{
              backgroundColor: handleColor(item),
              ...tailwind("py-1 px-2 ml-1 rounded-full"),
            }}
          >
            <Text style={tailwind("text-sm text-white")}>{item}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}