"use client";

import { useEffect, useState } from "react";
import { useChatStore } from "@/lib/store";

export function PersonSwitcher() {
  const personId = useChatStore((s) => s.personId);
  const switchPerson = useChatStore((s) => s.switchPerson);
  const [mounted, setMounted] = useState(false);

  // Defer personId render to avoid SSR/client hydration mismatch
  // (server generates a fresh UUID, client rehydrates from localStorage)
  useEffect(() => setMounted(true), []);

  const short = mounted ? personId.slice(0, 8) : "\u00A0";

  return (
    <div className="px-4 py-2 border-b border-border flex items-center justify-between">
      <span className="text-text-faint text-[11px] font-mono tracking-tight">
        {short}
      </span>
      <button
        onClick={() => switchPerson()}
        className="text-text-faint hover:text-text text-[11px] transition-colors px-1.5 py-0.5 rounded hover:bg-bg-hover"
      >
        switch identity
      </button>
    </div>
  );
}