import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

export default async function ProblemLayout({
  children,
  description,
  answer,
  console,
}: {
  children: React.ReactNode;
  description: React.ReactNode;
  answer: React.ReactNode;
  console: React.ReactNode;
}) {
  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"
        >
          {description}
        </ResizablePanel>
        <ResizableHandle className="hidden lg:block bg-transparent hover:bg-cyan-500" />
        <ResizablePanel defaultSize={50} className="border rounded-lg">
          {answer}
        </ResizablePanel>
        <ResizableHandle className="hidden xl:block bg-transparent hover:bg-cyan-500" />
        <ResizablePanel
          defaultSize={25}
          className="hidden xl:block border rounded-lg"
        >
          {console}
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}