import type { RefObject } from 'react'
import logo from '../assets/images/exo-logo.png'
import { navLinks } from '../data/content'
import { cx } from '../lib/cx'
import { ButtonLink, buttonClass, headerSize } from './Button'
import { PhoneIcon } from './Icons'
import { Container } from './Layout'

export function SiteHeader({
  scrolled,
  headerRef,
  onCallbackClick,
}: {
  scrolled: boolean
  headerRef: RefObject<HTMLElement | null>
  onCallbackClick: () => void
}) {
  return (
    <header
      ref={headerRef}
      className={cx(
        'fixed inset-x-0 top-0 z-50 py-[14px] transition-[background-color,box-shadow,backdrop-filter] duration-250 md:py-[18px]',
        scrolled && 'bg-navy-deep/[0.86] shadow-[0_12px_40px_rgb(3_20_34/0.18)] backdrop-blur-[18px]',
      )}
    >
      <Container className="flex items-center justify-between gap-[18px]">
        <a className="inline-flex min-w-0 items-center" href="#top" aria-label="Экзо Групп — на первый экран">
          <img
            alt="Экзо Групп — российские технологии реабилитации"
            className="block h-auto w-[clamp(172px,20vw,232px)] max-w-full object-contain object-left compact:w-[150px] micro:w-[132px]"
            src={logo}
            width={900}
            height={204}
          />
        </a>

        <nav
          aria-label="Основная навигация"
          className="hidden items-center gap-[30px] text-[14px] font-[650] text-white/[0.76] md:flex"
        >
          {navLinks.map((link) => (
            <a key={link.href} href={link.href} className="transition-colors duration-200 hover:text-white">
              {link.label}
            </a>
          ))}
        </nav>

        <div className="flex shrink-0 items-center gap-[10px] compact:gap-[6px] micro:gap-[5px]">
          <button
            type="button"
            onClick={onCallbackClick}
            aria-label="Заказать обратный звонок"
            className={buttonClass('call', 'compact:px-[12px]', headerSize)}
          >
            <PhoneIcon />
            <span className="compact:hidden">Звонок</span>
          </button>
          <ButtonLink href="#proposal" size={headerSize}>
            Получить предложение
          </ButtonLink>
        </div>
      </Container>
    </header>
  )
}