'use client';

import { useTranslation } from 'react-i18next';

import type { IPlayerInfo } from '@/models/IPlayerInfo';
import style from '@/styles/web.module.scss';

type Props = {
  players: IPlayerInfo[];
};

export function PlayersList({ players }: Props) {
  const { t } = useTranslation();

  return (
    <div className={style.guideBody}>
      <h2>Players</h2>
      <hr />
      <br />
      {players.map((el) => {
        const charClass =
          style[`character-${el.name_id}` as keyof typeof style] ?? '';
        return (
          <div
            key={`playerInfoLoop-${el.id}`}
            className={style.characterBlock}
            style={{
              animationDelay: `${el.id * 0.2}s`,
            }}
          >
            <div className={charClass} />
            <div className={style.titlePlayer}>
              <span className={style.titlePlayerBlock}>{t('player_name')}</span>
            </div>
            <div>{el.player_name}</div>
            <div className={style.titlePlayer}>
              <span className={style.titlePlayerBlock}>{t('use_character')}</span>
            </div>
            <div>{el.name_jp}</div>
            <div className={style.titlePlayer}>
              <span className={style.titlePlayerBlock}>{t('description')}</span>
            </div>
            <div>{el.description}</div>
          </div>
        );
      })}
    </div>
  );
}