import s from './styles.module.scss';
import Link from 'next/link';
import Image from 'next/image';
import { Breadcrumbs } from '@/widgets';
import { breadcrumbData } from './model/breadcrums';
import { expertsData } from './model/experts';
import { ROUTES } from '@shared/const/route';

function Experts() {
  return (
    <>
      <Breadcrumbs breadcrumbs={breadcrumbData} />
      <section className={s.Container}>
        {expertsData.map(
          ({ name, photo, position, certificate, link }, index) => (
            <Link href={link ?? ROUTES.EXPERTS} key={index}>
              <div className={s.Block}>
                <div className={s.Expert}>
                  <Image
                    className={s.Image}
                    src={photo}
                    alt={`${position}-${name}`}
                  />
                  <p className={s.Name}>{name}</p>
                  <p className={s.Position}>{position}</p>
                </div>
                <div className={s.Certificate}>
                  {certificate && (
                    <Image
                      className={s.Image}
                      src={certificate}
                      alt={`${position}-${name}`}
                    />
                  )}
                </div>
              </div>
            </Link>
          ),
        )}
      </section>
    </>
  );
}

export { Experts };