'use client';

import { useTranslation } from 'react-i18next';
import YouTube from 'react-youtube';

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

type Props = {
  items: IGuideItem[];
};

const opts = {
  height: '195',
  width: '320',
};

export function GuideVideoList({ items }: Props) {
  const { t } = useTranslation();

  return (
    <div className={style.guideBody}>
      <h2>{t('guide')}</h2>
      <hr />
      <br />
      {items.map((el) => (
        <div
          key={`guideItemsLoop-${el.id}`}
          className={style.characterBlock}
          style={{
            animationDelay: `${el.id * 0.2}s`,
          }}
        >
          <h4>{el.title}</h4>
          <hr />
          <div>{el.description}</div>
          <div className={style.centerVideo}>
            <YouTube videoId={el.youtube_id} opts={opts} />
          </div>
        </div>
      ))}
    </div>
  );
}