"use client";

import { AccountSwitcher } from "@/components/layout/account-switcher";
import { ThemeToggle } from "@/components/theme-toggle";

interface SidebarUtilitiesProps {
  userEmail?: string | null;
  onLogout?: () => void;
}

export function SidebarUtilities({ userEmail, onLogout }: SidebarUtilitiesProps) {
  return (
    <div className="mt-5 space-y-3 border-t border-border pt-4">
      <div className="px-2">
        <p className="mb-2 text-[11px] text-muted-foreground">經營帳號</p>
        <AccountSwitcher />
      </div>

      <div className="flex items-center justify-between gap-2 px-2">
        <span className="text-[11px] text-muted-foreground">外觀</span>
        <ThemeToggle compact />
      </div>

      <div className="flex items-center justify-between gap-2 px-2 pb-1">
        <p className="min-w-0 truncate text-[11px] text-muted-foreground">{userEmail ?? "已登入"}</p>
        {onLogout && (
          <button
            type="button"
            onClick={onLogout}
            className="shrink-0 text-[11px] text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:text-foreground"
          >
            登出
          </button>
        )}
      </div>
    </div>
  );
}