"use client";

type Props = {
  showProfile: boolean;
  showProgress: boolean;
  onToggleProfile: () => void;
  onToggleProgress: () => void;
  onNewChat?: () => void;
};

export function HeaderToggles({
  showProfile,
  showProgress,
  onToggleProfile,
  onToggleProgress,
  onNewChat,
}: Props) {
  return (
    <header className="flex items-center justify-between border-b border-slate-700/80 bg-[#0b1220] px-4 py-3">
      <div>
        <p className="text-sm font-semibold tracking-wide text-sky-300">Mortgage protection</p>
        <p className="text-xs text-slate-400">Chat stays open · steps 0–8 · licensed agent after 8</p>
      </div>
      <div className="flex items-center gap-3">
        {onNewChat && (
          <button
            type="button"
            aria-label="Start a new case"
            onClick={onNewChat}
            className="rounded-lg border border-slate-600 px-3 py-1.5 text-xs font-medium text-slate-200 hover:border-sky-400 hover:text-sky-200"
          >
            New chat
          </button>
        )}
        <label className="flex items-center gap-2 text-sm text-slate-200">
          <span>Profile</span>
          <button
            type="button"
            aria-label="Toggle profile"
            onClick={onToggleProfile}
            className={`relative h-6 w-11 rounded-full ${showProfile ? "bg-sky-400" : "bg-slate-600"}`}
            aria-pressed={showProfile}
          >
            <span
              className={`absolute top-0.5 h-5 w-5 rounded-full bg-white transition ${
                showProfile ? "left-5" : "left-0.5"
              }`}
            />
          </button>
        </label>
        <label className="flex items-center gap-2 text-sm text-slate-200">
          <span>Progress</span>
          <button
            type="button"
            aria-label="Toggle progress"
            onClick={onToggleProgress}
            className={`relative h-6 w-11 rounded-full ${showProgress ? "bg-sky-400" : "bg-slate-600"}`}
            aria-pressed={showProgress}
          >
            <span
              className={`absolute top-0.5 h-5 w-5 rounded-full bg-white transition ${
                showProgress ? "left-5" : "left-0.5"
              }`}
            />
          </button>
        </label>
      </div>
    </header>
  );
}