// CompRankBadge.tsx
'use client';
import Image from 'next/image';
import Tooltip from './Tooltip';

type Props = { rank: number | null };

const rankNames: Record<number, string> = {
  1: 'Silver I',
  2: 'Silver II',
  3: 'Silver III',
  4: 'Silver IV',
  5: 'Silver Elite',
  6: 'Silver Elite Master',
  7: 'Gold Nova I',
  8: 'Gold Nova II',
  9: 'Gold Nova III',
  10: 'Gold Nova Master',
  11: 'Master Guardian I',
  12: 'Master Guardian II',
  13: 'Master Guardian Elite',
  14: 'Distinguished Master Guardian',
  15: 'Legendary Eagle',
  16: 'Legendary Eagle Master',
  17: 'Supreme Master First Class',
  18: 'Global Elite',
  9999: 'Rank Expired',
};

export default function CompRankBadge({ rank }: Props) {
  let imageName = 'skillgroup_none.webp';
  let altText = 'No Rank';
  if (typeof rank === 'number') {
    if (rank >= 1 && rank <= 18) {
      imageName = `skillgroup${rank}.webp`;
      altText = rankNames[rank];
    } else if (rank === 9999) {
      imageName = 'skillgroup_expired.webp';
      altText = rankNames[9999];
    }
  }

  return (
    <Tooltip content={altText}>
      <Image
        src={`/assets/img/skillgroups/${imageName}`}
        alt={altText}
        width={60}
        height={60}
        // Wichtig: feste Höhe für die Zeile, Breite auto
        className="inline-block align-middle h-7 w-auto" // h-7 = 28px
        sizes="70px"
        style={{ objectFit: 'contain' }}
      />
    </Tooltip>
  );
}