'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}
        sizes="(max-width: 768px) 100px, 70px"
        style={{ objectFit: 'contain' }} // ← korrekt!
      />
    </Tooltip>
  );
}
