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

export default function Level({ level }) {
  const tailwind = useTailwind();
  const handleColor = () => {
    switch (true) {
      case level <= 10:
        return "bg-gray-400";
      case level > 10 && level <= 20:
        return "bg-green-400";
      case level > 20 && level <= 30:
        return "bg-blue-400";
      case level > 30 && level <= 40:
        return "bg-fuchsia-400";
      case level > 40 && level <= 50:
        return "bg-yellow-400";
      case level > 50:
        return "bg-orange-400";
      default:
        return "bg-gray-400";
    }
  };
  const color = handleColor();
  return (
    <View
      style={{
        ...tailwind(
          "shrink flex-none h-5 px-2 mx-1 rounded-full flex justify-center items-center"
        ),
        ...tailwind(color),
      }}
    >
      <Text
        style={tailwind("text-sm font-bold text-white")}
      >{`Lv.${level}`}</Text>
    </View>
  );
}