<script lang="ts">
  export let diffName: string;
  export let modeName: string = 'Standard';

  function difficultyToColor(name: string | undefined): string {
    const n = (name ?? 'ExpertPlus').toLowerCase();
    if (n === 'easy') return 'MediumSeaGreen';
    if (n === 'normal') return '#59b0f4';
    if (n === 'hard') return 'tomato';
    if (n === 'expert') return '#bf2a42';
    if (n === 'expertplus' || n === 'expert+' || n === 'ex+' ) return '#8f48db';
    return '#8f48db';
  }
</script>

<span class="rounded bg-white/10 px-2 py-0.5 text-[11px]">
  {modeName} ·
  <span class="rounded px-1 ml-1" style="background-color: {difficultyToColor(diffName)}; color: #fff;">
    {diffName}
  </span>
</span>

