'use client';

import s from './styles.module.scss';
import Link from 'next/link';
import { Button } from '@shared/ui';
import { TSidebar } from '@shared/types/sidebar';
import { useModal } from '@core/providers/modal-provider';
import { ConsultationModal } from '@/feature/article';
import { CONTACTS } from '@shared/const/contacts';

type SidebarProps = { pageName?: string } & TSidebar;

function Sidebar({
  estimate = '3',
  offer,
  relatedTitle,
  related,
  warrantiesTitle,
  warranties,
  pageName,
}: SidebarProps) {
  const modal = useModal();
  const openModal = () =>
    modal.showModal(<ConsultationModal pageName={pageName} />);

  const callTo = `tel:${CONTACTS.PHONE}`;

  return (
    <aside className={s.Sidebar}>
      <div className={s.Estimation}>
        <h4 className={s.Title}>Срок выполнения:</h4>
        <p className={s.Estimate}>от {estimate} дней</p>
        <p className={s.Text}>{offer}</p>
        <p className={s.Text}>Оставьте заявку или позвоните по телефону</p>
        <Button variant={'white'} onClick={openModal}>
          Записаться
        </Button>
        <a href={callTo}>
          <p className={s.Phone}>+7 (900) 241-34-34</p>
        </a>
      </div>
      {related && (
        <div className={s.Related}>
          <h4 className={s.Title}>{relatedTitle}</h4>
          <ul className={s.List}>
            {related?.map(({ title, link }, index) => (
              <li key={index} className={s.ListItem}>
                <Link href={link}>{title}</Link>
              </li>
            ))}
          </ul>
        </div>
      )}
      {warranties && (
        <div className={s.Warranties}>
          <h4 className={s.Title}>{warrantiesTitle}</h4>
          <ul className={s.List}>
            {warranties.map((warranty, index) => (
              <li key={index} className={s.ListItem}>
                {warranty}
              </li>
            ))}
          </ul>
        </div>
      )}
    </aside>
  );
}

export { Sidebar };