import { logout } from '@/app/(protected)/_actions';
import { ThemeToggleButton } from '@/app/(protected)/(basic)/_components/theme-toggle-button';
import { Header } from '@/components/ui/header';

interface AdminHeaderProps {
  onOpenSidebar: () => void;
  onToggleSidebarCollapse: () => void;
}

/**
 * 헤더 배치 — 비주얼 셸(Header)은 design 공용 컴포넌트를 그대로 쓰고, 사이드바 토글 버튼(공용
 * 컴포넌트가 제공하지 않는 상호작용)만 `leading` 슬롯에 주입한다. 테마 토글과 로그아웃은
 * `children`(우측 슬롯)에 주입한다 — 테마 토글이 로그아웃 왼쪽에 오도록 DOM 순서를 그대로
 * 시각 순서로 사용한다(Tab 포커스 순서도 동일하게 따라간다).
 */
export function AdminHeader({
  onOpenSidebar,
  onToggleSidebarCollapse,
}: AdminHeaderProps) {
  return (
    <Header
      title="에듀페이 관리자"
      leading={
        <>
          {/* 모바일 전용 — 사이드바를 오버레이로 연다 */}
          <button
            type="button"
            aria-label="사이드바 열기"
            onClick={onOpenSidebar}
            className="border border-foreground/25 px-2 py-1 text-sm text-foreground md:hidden"
          >
            메뉴
          </button>
          {/* 데스크톱 전용 — 사이드바를 접거나 펼친다 */}
          <button
            type="button"
            aria-label="사이드바 접기/펼치기"
            onClick={onToggleSidebarCollapse}
            className="hidden border border-foreground/25 px-2 py-1 text-sm text-foreground md:inline-flex"
          >
            메뉴
          </button>
        </>
      }
    >
      <ThemeToggleButton />
      <form action={logout}>
        <button
          type="submit"
          className="border border-foreground/25 px-3 py-1.5 text-sm text-foreground"
        >
          로그아웃
        </button>
      </form>
    </Header>
  );
}