"use client";
/*
 * Documentation:
 * Drawer Layout — https://app.subframe.com/f023064a5ca0/library?component=Drawer+Layout_2f6803ed-5ed0-4934-b093-a1a46df2d1d1
 * Drawer Right — https://app.subframe.com/f023064a5ca0/library?component=Drawer+Right_1e71b2cb-8d72-4e67-b368-8805179e9444
 */

import React from "react";
import { DrawerRight } from "../../components/DrawerRight";
import * as SubframeUtils from "../../utils";

export interface DrawerLayoutRootProps
  extends React.ComponentProps<typeof DrawerRight> {
  children?: React.ReactNode;
  className?: string;
}

const DrawerLayoutRoot = React.forwardRef<
  React.ElementRef<typeof DrawerRight>,
  DrawerLayoutRootProps
>(function DrawerLayoutRoot(
  { children, className, ...otherProps }: DrawerLayoutRootProps,
  ref
) {
  return (
    <DrawerRight className={className} ref={ref} {...otherProps}>
      <DrawerRight.Content>
        {children ? (
          <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-8 bg-surface-neutral-secondary">
            {children}
          </div>
        ) : null}
      </DrawerRight.Content>
    </DrawerRight>
  );
});

export const DrawerLayout = DrawerLayoutRoot;