import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cn } from '../primitives/utils'

export interface BrowserLayoutProps extends HTMLAttributes<HTMLDivElement> {
  toolbar?: ReactNode
  sidebar?: ReactNode
  sidebarWidth?: string
  detail?: ReactNode
  detailWidth?: string
  children: ReactNode
}

const BrowserLayout = forwardRef<HTMLDivElement, BrowserLayoutProps>(
  (
    {
      toolbar,
      sidebar,
      sidebarWidth = '240px',
      detail,
      detailWidth = '400px',
      className,
      children,
      ...props
    },
    ref
  ) => (
    <div ref={ref} className={cn('flex h-full flex-col', className)} {...props}>
      {toolbar && <div className="shrink-0 border-b border-border-glass px-4 py-3">{toolbar}</div>}
      <div className="flex min-h-0 flex-1">
        {sidebar && (
          <aside
            className="shrink-0 overflow-y-auto border-r border-border-glass p-3"
            style={{ width: sidebarWidth }}
          >
            {sidebar}
          </aside>
        )}
        <div className="min-w-0 flex-1 overflow-y-auto">{children}</div>
        {detail && (
          <aside
            className="shrink-0 overflow-y-auto border-l border-border-glass"
            style={{ width: detailWidth }}
          >
            {detail}
          </aside>
        )}
      </div>
    </div>
  )
)
BrowserLayout.displayName = 'BrowserLayout'
export { BrowserLayout }
