"use client";

import { cn } from "@/lib/utils";
import { usePanelStore } from "@/lib/stores/panel-store";
import { ObjectDetail } from "./object-detail";
import { AIChatPanel } from "@/components/ai";

export function RightPanel() {
  const isOpen = usePanelStore((s) => s.isOpen);
  const content = usePanelStore((s) => s.content);

  return (
    <div
      className={cn(
        "flex h-full shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
        isOpen ? "w-[360px]" : "w-0",
      )}
      aria-hidden={!isOpen}
    >
      {isOpen && content ? (
        <div className="flex h-full w-[360px] flex-col border-l border-border bg-card text-card-foreground">
          {content === "object-detail" && <ObjectDetail />}
          {content === "ai-chat" && <AIChatPanel />}
        </div>
      ) : null}
    </div>
  );
}