import * as React from 'react'

import { cn } from '../primitives/utils'

export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
  sidebar?: React.ReactNode
  header?: React.ReactNode
  metrics?: React.ReactNode
  children?: React.ReactNode
  contentClassName?: string
}

export function AppShell({
  sidebar,
  header,
  metrics,
  children,
  className,
  contentClassName,
  ...props
}: AppShellProps) {
  return (
    <div className={cn('cmm-app-shell', className)} {...props}>
      {sidebar !== undefined ? <aside className="cmm-app-shell__sidebar">{sidebar}</aside> : null}
      <div className="cmm-app-shell__main">
        {header}
        <main className={cn('cmm-app-shell__content', contentClassName)}>
          {metrics !== undefined ? (
            <div className="cmm-app-shell__metric-strip">{metrics}</div>
          ) : null}
          {children}
        </main>
      </div>
    </div>
  )
}
