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

const TOKEN_LEVEL_STYLES_MAP = {
  [AssetLevelEnum.A_PLUS]: { bg: '#7fc241' },
  [AssetLevelEnum.A]: { bg: '#6fa436' },
  [AssetLevelEnum.A_MINUS]: { bg: '#4f7836' },
  [AssetLevelEnum.B_PLUS]: { bg: '#10823b' },
  [AssetLevelEnum.B]: { bg: '#426d26' },
  [AssetLevelEnum.B_MINUS]: { bg: '#355125' },
  [AssetLevelEnum.C_PLUS]: { bg: '#004d25' },
  [AssetLevelEnum.C]: { bg: '#02231c' },
  [AssetLevelEnum.C_MINUS]: { bg: '#231f20' },
};

interface TokenLevelProps {
  level: AssetLevelEnum;
  onPress?: () => void;
}

export function TokenLevel({ level, onPress }: TokenLevelProps) {
  const bgColor = TOKEN_LEVEL_STYLES_MAP[level]?.bg || '#ffffff';

  return (
    <TouchableOpacity onPress={onPress}>
      <View style={tw`m-1 rounded-s w-8 h-8 p-0.8 bg-[${bgColor}]`}>
        <View
          style={tw.style(`rounded-s border-[#9db48f] w-full h-full justify-center items-center`, {
            borderWidth: 0.5,
          })}>
          <Text style={tw`font-extrabold uppercase dark:text-white`}>{level}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}