Header Editor

"use client";

import { useId, useState } from "react";
import { ArrowLeft, Monitor, Smartphone, Tablet } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderEditorProps {
  title?: string;
  backHref?: string;
  onDeviceChange?: (device: "desktop" | "tablet" | "mobile") => void;
  className?: string;
}

/** Editor top bar in three zones: back arrow + editable page title, a centered square device switcher (desktop/tablet/mobile, radio semantics), and undo/redo text actions + save state + ink Publish. */
export function HeaderEditor({ title = "Oslo Opera — Identity", backHref = "#projects", onDeviceChange, className }: HeaderEditorProps) {
  const [device, setDevice] = useState<"desktop" | "tablet" | "mobile">("desktop");
  const [name, setName] = useState(title);
  const id = useId();
  const devices = [
    { v: "desktop", icon: Monitor, l: "Desktop" },
    { v: "tablet", icon: Tablet, l: "Tablet" },
    { v: "mobile", icon: Smartphone, l: "Mobile" },
  ] as const;
  return (
    <header className={cn("grid h-14 grid-cols-[1fr_auto_1fr] items-center gap-4 border-b border-da-border bg-da-bg px-3 text-da-fg", className)}>
      <div className="flex min-w-0 items-center gap-2">
        <a href={backHref} aria-label="Back to projects" className="da-focus grid size-9 shrink-0 place-items-center rounded-da-sm hover:bg-da-surface-2">
          <ArrowLeft aria-hidden className="size-4" />
        </a>
        <label className="sr-only" htmlFor={id}>
          Page title
        </label>
        <input
          id={id}
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="da-focus min-w-0 flex-1 rounded-da-sm bg-transparent px-1 py-1 font-medium outline-none hover:bg-da-surface-2 focus:bg-da-surface-2"
        />
      </div>
      <div role="radiogroup" aria-label="Preview device" className="flex border border-da-border">
        {devices.map((d) => (
          <button
            key={d.v}
            type="button"
            role="radio"
            aria-checked={device === d.v}
            aria-label={d.l}
            title={d.l}
            onClick={() => {
              setDevice(d.v);
              onDeviceChange?.(d.v);
            }}
            className={cn(
              "da-focus grid size-9 place-items-center border-da-border not-first:border-l",
              device === d.v ? "bg-da-fg text-da-bg" : "text-da-muted-fg hover:text-da-fg",
            )}
          >
            <d.icon aria-hidden className="size-4" strokeWidth={1.5} />
          </button>
        ))}
      </div>
      <div className="flex items-center justify-end gap-4">
        <span className="hidden font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase md:inline">Saved</span>
        <button type="button" className="da-focus hidden rounded-da-sm font-da-mono text-[11px] tracking-da-label uppercase hover:underline sm:inline">
          Undo
        </button>
        <button type="button" className="da-focus h-9 rounded-da-sm bg-da-primary px-3 text-sm font-medium text-da-primary-fg hover:opacity-85">
          Publish
        </button>
      </div>
    </header>
  );
}

export default HeaderEditor;