import { View, Text } from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";

/*
参数格式：
  {
    type:"sm"|"lg",  大小
    status:"online"|"offline"|"chatting",  状态
    position:"absolute"|"relative",  位置（其实就是tailwind属性）
  }
 */

export default function UserStatus({ type, status, position }) {
  const tailwind = useTailwind();
  const handleColor = () => {
    if (status === "online") {
      return { color: "#a3e635", text: "在线" };
    } else if (status === "offline") {
      return { color: "#facc15", text: "活跃" };
    } else {
      return { color: "#dc2626", text: "在聊" };
    }
  };
  const statusPill = handleColor();
  return (
    <>
      {type === "lg" ? (
        <View
          style={{
            backgroundColor: "rgba(0,0,0,0.7)",
            ...tailwind(
              "flex-row justify-between items-center rounded-xl px-2 py-1 z-20"
            ),
            ...tailwind(position),
          }}
        >
          <View
            style={{
              backgroundColor: statusPill.color,
              ...tailwind("w-2 h-2 rounded-full"),
            }}
          ></View>
          <Text style={tailwind("text-white ml-1")}>{statusPill.text}</Text>
        </View>
      ) : (
        <View
          style={{
            backgroundColor: statusPill.color,
            ...tailwind(
              "flex-row justify-between items-center rounded-xl px-2 py-0.5 z-20"
            ),
            ...tailwind(position),
          }}
        >
          <Text style={tailwind("text-white text-xs")}>{statusPill.text}</Text>
        </View>
      )}
    </>
  );
}