export function GradeIcon({ grade, width = 32, height = 32, className }: { grade: number; width?: number; height?: number; className?: string }) {
  // grade: 0~7 (bronze, silver, gold, platinum, diamond, master, grandmaster, god)
  const gradeImages = [
    "/svgs/01_bronze.svg",
    "/svgs/02_silver.svg.svg",
    "/svgs/03_gold.svg",
    "/svgs/04_platinum.svg",
    "/svgs/05_diamond.svg",
    "/svgs/06_master.svg",
    "/svgs/07_grandmaster.svg",
    "/svgs/08_god.svg",
  ];

  const gradeIndex = Math.min(7, Math.max(0, grade));
  const imageSrc = gradeImages[gradeIndex];

  return (
    <img
      src={imageSrc}
      alt={`등급 ${gradeIndex + 1}`}
      width={width}
      height={height}
      className={className}
      style={{ width, height }}
    />
  );
}

// 등급 숫자를 등급 이름으로 변환하는 함수
export function getGradeName(grade: number): string {
  const gradeNames = [
    "Bronze",
    "Silver",
    "Gold",
    "Platinum",
    "Diamond",
    "Master",
    "Grandmaster",
    "God",
  ];
  
  const gradeIndex = Math.min(7, Math.max(0, grade));
  return gradeNames[gradeIndex];
}