import { useMemo } from 'react';
import { View } from 'react-native';
import { BEING_ID_LEVELS } from '@bit-ui-libs/common';
import { Text } from '../../../components';
import { tw } from '../../../core';

interface BeingIdLevelProps {
  level?: number;
  label?: string;
}

export function BeingIdLevel({ level, label }: BeingIdLevelProps) {
  const beingIdLevel = useMemo(() => BEING_ID_LEVELS.find(l => l.level === level)?.label, [level]);
  return (
    <View style={tw`bg-[#C9A01333] p-px rounded-full flex-row my-1`}>
      <View style={tw`bg-[#C9A013DB] rounded-full w-5 h-5 items-center justify-center mr-1.5`}>
        <Text style={{ fontSize: 11 }}>{level}</Text>
      </View>
      <Text style={tw.style(`font-bold text-[#B89316] pr-2`, { fontSize: 10 })}>{label || beingIdLevel}</Text>
    </View>
  );
}