import { Link } from 'react-router-dom';
import { Logo } from '../icons/Logo';
import { Button } from '../ui/Button';
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
import { useModalStore } from '../../stores/modalStore';
import { ModalWithForm } from './ModalWithForm';

export function Header() {
  const { setModal } = useModalStore();

  return (
    <header className="lg:px-6 flex items-center h-16 border-b border-[#3D425C] bg-[#14161F]">
      <Link to={'/'}>
        <ClassNameWrapper element={<Logo />} className="h-10" />
      </Link>
      <nav className="mx-auto self-stretch flex">
        {[
          { path: '/#products', text: 'Продукты' },
          { path: '/#devices', text: 'Оборудование' },
          { path: '/#projects', text: 'Проекты' },
          { path: '/#contacts', text: 'Контакты' },
        ].map(link => (
          <HashLink key={link.path} {...link} />
        ))}
      </nav>
      <Button
        className="-mr-6 rounded-none h-full px-10"
        onClick={() => setModal(<ModalWithForm />)}
      >
        Отправить заявку
      </Button>
    </header>
  );
}

function HashLink({ path, text }: { path: string; text: string }) {
  return (
    <Link
      className="border-l last:border-r border-[#3D425C] px-10 self-stretch text-[#9299BD] content-center hover:bg-[#3D425C]"
      to={path}
    >
      {text}
    </Link>
  );
}