'use client';

import { useTranslation } from 'react-i18next';

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

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

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

  return (
    <div className={style.guideBody}>
      <h2>{t('qanda')}</h2>
      <hr />
      <div className={style.contactBox}>
        <a href="https://forms.gle/Dn4p7cFEPLK1zcTz5" rel="noopener noreferrer" target="_blank">
          &nbsp;
        </a>
      </div>
      {items.map((el) => (
        <div
          key={`contactItemsLoop-${el.id}`}
          className={style.characterBlock}
          style={{
            animationDelay: `${el.id * 0.2}s`,
          }}
        >
          <h4>{el.question}</h4>
          <hr />
          <div>{el.answer}</div>
        </div>
      ))}
    </div>
  );
}