'use client';

import s from './styles.module.scss';
import clsx from 'clsx';
import { useState } from 'react';
import Link from 'next/link';
import { servicesData } from './data';

enum SwitcherOption {
  EXPERTISE = 'expertise',
  OCENKA = 'ocenka',
  JURIST = 'jurist',
}

function Services() {
  const [switcher, setSwitcher] = useState<SwitcherOption>(
    SwitcherOption.EXPERTISE,
  );

  const handleSwitch = (switcher: SwitcherOption) => () => {
    setSwitcher(switcher);
  };

  return (
    <section className={s.Service}>
      <h2 className={s.Title}>Выберите услугу</h2>

      <div className={s.Switcher}>
        <div
          className={clsx(
            s.Button,
            switcher === SwitcherOption.EXPERTISE && s.Button_active,
          )}
          onClick={handleSwitch(SwitcherOption.EXPERTISE)}
        >
          Экспертиза
        </div>
        <div
          className={clsx(
            s.Button,
            switcher === SwitcherOption.OCENKA && s.Button_active,
          )}
          onClick={handleSwitch(SwitcherOption.OCENKA)}
        >
          Оценка
        </div>
        <div
          className={clsx(
            s.Button,
            switcher === SwitcherOption.JURIST && s.Button_active,
          )}
          onClick={handleSwitch(SwitcherOption.JURIST)}
        >
          Юрист
        </div>
      </div>

      <div className={s.Grid}>
        {servicesData[switcher].map(({ id, title, icon, url }, i) => (
          <Link key={id} href={url}>
            <div className={s.Tile}>
              {icon}
              {title}
            </div>
          </Link>
        ))}
      </div>
    </section>
  );
}

export { Services };