import {
  CodeXmlIcon,
  FileChartColumnIcon,
  SquareChevronRightIcon,
  GitCommitHorizontalIcon,
} from "lucide-react";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import CommitPage from "./views/commit-page";
import AnswerPage from "./views/answer-page";
import ConsolePage from "./views/console-page";
import { TabsCard } from "./components/tabs-card";
import DescriptionPage from "./views/description-page";

export default async function ProblemLayout({
  params,
  children,
}: {
  params: Promise<{ slug: string }>;
  children: React.ReactNode;
}) {
  const slug = (await params).slug;
  const descriptionTabsItems = [
    {
      icon: FileChartColumnIcon,
      label: "题目描述",
      value: "description",
      content: <DescriptionPage slug={slug} />,
    },
    {
      icon: GitCommitHorizontalIcon,
      label: "提交记录",
      value: "commit",
      content: <CommitPage slug={slug} />,
    },
  ];
  const answerTabsItems = [
    {
      icon: CodeXmlIcon,
      label: "代码",
      value: "code",
      content: <AnswerPage slug={slug} />,
    },
  ];
  const consoleTabsItems = [
    {
      icon: SquareChevronRightIcon,
      label: "控制台",
      value: "console",
      content: <ConsolePage slug={slug} />,
    },
  ];
  return (
    <div className="h-full rounded-b-xl">
      {children}
      <ResizablePanelGroup direction="horizontal" className="gap-0.5 p-2 pt-0">
        <ResizablePanel
          defaultSize={25}
          className="hidden lg:block border rounded-lg"
        >
          <TabsCard tabsItems={descriptionTabsItems} />
        </ResizablePanel>
        <ResizableHandle className="hidden lg:block bg-transparent hover:bg-cyan-500" />
        <ResizablePanel defaultSize={50} className="border rounded-lg">
          <TabsCard tabsItems={answerTabsItems} />
        </ResizablePanel>
        <ResizableHandle className="hidden xl:block bg-transparent hover:bg-cyan-500" />
        <ResizablePanel
          defaultSize={25}
          className="hidden xl:block border rounded-lg"
        >
          <TabsCard tabsItems={consoleTabsItems} />
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}