import { Waypoints } from "lucide-react";
import type { ReactNode } from "react";

export function Header({ children }: { children: ReactNode }) {
  return (
    <header className="mx-auto flex w-full max-w-[1580px] flex-col gap-5 px-4 py-5 sm:px-6 lg:flex-row lg:items-end lg:justify-between lg:px-8">
      <a className="group flex shrink-0 items-center gap-3" href="/" aria-label="Tokenize it 首页">
        <span className="grid size-10 place-items-center rounded-[13px] bg-[var(--ink)] text-[var(--paper)] shadow-[var(--shadow-soft)] transition-transform group-hover:-rotate-3">
          <Waypoints aria-hidden="true" size={20} strokeWidth={1.8} />
        </span>
        <span>
          <span className="block text-[15px] font-semibold tracking-[-0.02em] text-[var(--ink)]">
            Tokenize it
          </span>
          <span className="block text-[9px] font-semibold uppercase tracking-[0.22em] text-[var(--muted)]">
            Browser native
          </span>
        </span>
      </a>
      <div className="flex min-w-0 flex-wrap items-end gap-2 sm:justify-end">{children}</div>
    </header>
  );
}