import s from './styles.module.scss';
import Link from 'next/link';
import Image from 'next/image';
import { ROUTES } from '@shared/const/route';
import sberImg from '@public/images/sber-domclick.jpg';

type BreadcrumbsProps = {
  breadcrumbs: {
    name: string;
    path: string;
  }[];
};

function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
  return (
    <section className={s.Container}>
      <div className={s.Breadcrumbs}>
        <div className={s.Block}>
          <ul className={s.List}>
            <li className={s.ListItem}>
              <Link href={ROUTES.HOME}>ДИ ТРАСО</Link>
            </li>
            <li className={s.ListItem}>
              <Link href={breadcrumbs[0].path}>{breadcrumbs[0].name}</Link>
            </li>
          </ul>
          <h2 className={s.Header}>{breadcrumbs[1].name}</h2>
        </div>
        <div className={s.Advertise}>
          <Image
            className={s.Image}
            src={sberImg}
            alt={'Сбербанк, Дом-клик'}
            width={400}
          />
          <p className={s.Description}>Аккредитованая оценочная компания</p>
        </div>
      </div>
    </section>
  );
}

export { Breadcrumbs };
