import Link from 'next/link';
import React from 'react';

import BaseButton from './BaseButton';
import { webPagesNavBar } from '../menuNavBar';

type Props = {
  title?: string;
  subtitle?: string;
};

export default function PublicSiteHeader({
  title = 'Gracey Corporate Stay Portal',
  subtitle = 'Corporate stay operations',
}: Props) {
  return (
    <header className="sticky top-0 z-30 border-b border-slate-200/80 bg-white/90 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-4 lg:px-10">
        <Link href="/" className="min-w-0">
          <div className="text-[11px] font-medium uppercase tracking-[0.28em] text-slate-500">{subtitle}</div>
          <div className="truncate text-base font-semibold text-slate-950 md:text-lg">{title}</div>
        </Link>

        <div className="hidden items-center gap-6 md:flex">
          <nav className="flex items-center gap-5 text-sm text-slate-600">
            {webPagesNavBar.map((item) => (
              <Link key={item.href || item.label} href={item.href || '/'} className="transition-colors hover:text-slate-950">
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="flex items-center gap-3">
            <BaseButton href="/login" color="whiteDark" label="Login" small />
            <BaseButton href="/command-center" color="info" label="Open workspace" small />
          </div>
        </div>
      </div>
    </header>
  );
}