'use client';

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

import { centerVideo, characterBlock, guideBody } from '@/lib/siteContentClasses';
import type { IGuideItem } from '@/models/IGuideItem';

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

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

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

  return (
    <div className={guideBody}>
      <h2 className="text-xl sm:text-2xl">{t('guide')}</h2>
      <hr />
      <br />
      {items.map((el) => (
        <div
          key={`guideItemsLoop-${el.id}`}
          className={characterBlock}
          style={{
            animationDelay: `${el.id * 0.2}s`,
          }}
        >
          <h4>{el.title}</h4>
          <hr />
          <div>{el.description}</div>
          <div className={centerVideo}>
            <div className="mx-auto w-full max-w-[360px] overflow-x-auto">
              <YouTube videoId={el.youtube_id} opts={opts} />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}