import s from './result.module.scss';
import { Mark } from '@shared/ui';

import Image from 'next/image';

import bogatyrImg from '@public/images/bogatyr.png';
import chateauImg from '@public/images/chateau-de-talu.png';
import schoolImg from '@public/images/school-20.png';

export default function Result() {
  return (
    <section className={s.Result}>
      <h2 className={s.Header}>
        Наш опыт – <br /> ваш <Mark>результат!</Mark>
      </h2>

      {resultData.map(({ title, location, description, image }, idx) => (
        <div key={idx} className={s.Row}>
          <div className={s.Review}>
            <h3 className={s.Title}>
              {title}, <br /> {location}
            </h3>
            <p className={s.Description}>{description}</p>
          </div>
          <div className={s.Picture}>
            <Image
              src={image}
              placeholder='blur'
              alt={''}
              quality={75}
              fill
              priority
            />
          </div>
        </div>
      ))}
    </section>
  );
}

const resultData = [
  {
    title: 'Отель Богатырь',
    location: 'г.Сочи',
    description:
      'Написать что требовалось,что сделали,что получилось и какие преимущества получил заказчик в итоге',
    image: bogatyrImg,
  },
  {
    title: 'Château de Talu',
    location: 'г. Геленджик',
    description:
      'Написать что требовалось,что сделали,что получилось и какие преимущества получил заказчик в итоге',
    image: chateauImg,
  },
  {
    title: 'МОБУ Школа №20',
    location: 'г.Сочи',
    description:
      'Написать что требовалось,что сделали,что получилось и какие преимущества получил заказчик в итоге',
    image: schoolImg,
  },
];
