import { useState } from "react";
import { Outlet } from "react-router-dom";
import { FiMenu, FiChevronsLeft } from "react-icons/fi";
import ChatSidebar from "@/components/social/chat/ChatSidebar";

export default function ChatLayout() {
  const [open, setOpen] = useState(true);

  return (
    <div
      className={[
        "grid h-screen transition-[grid-template-columns] duration-200",
        open ? "grid-cols-[280px_1fr]" : "grid-cols-[0px_1fr]",
      ].join(" ")}
    >
      {/* Sidebar — hidden via overflow+width collapse, not unmount (keeps scroll pos) */}
      <div className="overflow-hidden">
        <ChatSidebar />
      </div>

      <section className="relative flex h-full flex-col overflow-hidden">
        {/* Sidebar toggle — sits at the top-left of the chat pane */}
        <button
          type="button"
          onClick={() => setOpen((v) => !v)}
          className="absolute left-3 top-3 z-20 flex h-7 w-7 items-center justify-center rounded-full bg-brand-bgLight/60 text-brand-text/60 hover:bg-brand-lines/20 hover:text-brand-text transition-colors"
          aria-label={open ? "Hide sidebar" : "Show sidebar"}
        >
          {open ? <FiChevronsLeft size={15} /> : <FiMenu size={15} />}
        </button>

        <Outlet />
      </section>
    </div>
  );
}