import React from 'react';
import { cn } from "@/utils";

interface ModalLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}

export const ModalLayout = React.forwardRef<HTMLDivElement, ModalLayoutProps>(
  ({ className, children, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("flex flex-1 min-h-0 overflow-hidden", className)}
      {...props}
    >
      {children}
    </div>
  )
);
ModalLayout.displayName = "ModalLayout";

export const ModalSidebar = React.forwardRef<HTMLDivElement, ModalLayoutProps>(
  ({ className, children, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("w-64 flex flex-col border-r border-border bg-background h-full flex-shrink-0", className)}
      {...props}
    >
      {children}
    </div>
  )
);
ModalSidebar.displayName = "ModalSidebar";

export const ModalContent = React.forwardRef<HTMLDivElement, ModalLayoutProps>(
  ({ className, children, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("flex-1 flex flex-col min-w-0 bg-background relative", className)}
      {...props}
    >
      {children}
    </div>
  )
);
ModalContent.displayName = "ModalContent";
