import s from './styles.module.scss';
import Link from 'next/link';
import { TRelatedArticles } from '@shared/types/relatedArticles';
import { CallbackForm } from '@/entities';
import Image from 'next/image';
import { Icons } from '@shared/ui/icon';
import sberLogo from '@public/images/sberbank_logo.png';
import domclickLogo from '@public/images/domclick_logo.png';

type RelatedArticlesProps = {
  related: TRelatedArticles[];
  pageName?: string;
};

function RelatedArticles({ related, pageName }: RelatedArticlesProps) {
  return (
    <section className={s.Related}>
      <div className={s.Container}>
        <div className={s.Block}>
          <h3 className={s.Header}>
            Похожие услуги, которые возможно Вас заинтересуют
          </h3>
          <div className={s.Grid}>
            {related.map(({ title, description, link }, index) => (
              <div key={index} className={s.Block}>
                <h4 className={s.Title}>
                  <Link href={link}>{title}</Link>
                </h4>
                <p className={s.Description}>
                  <Link href={link}>{description}</Link>
                </p>
              </div>
            ))}
          </div>
          <CallbackForm pageName={pageName} />
        </div>
        <div className={s.Accreditation}>
          <h4 className={s.Title}> Аккредитованный партнер </h4>
          <Image className={s.Image} src={sberLogo} alt='Сбербанк' />
          <Icons.Home color={'#666666'} />
          <Image className={s.Image} src={domclickLogo} alt='Домклик' />
        </div>
      </div>
    </section>
  );
}

export { RelatedArticles };
