import * as React from 'react'
import { cn } from './cva'

export const DASHBOARD_MAIN_ID = 'dashboard-main'
export const DASHBOARD_SIDEBAR_ID = 'dashboard-sidebar'

export interface DashboardShellProps {
  sidebar: React.ReactNode
  topbar?: React.ReactNode
  children: React.ReactNode
  sidebarCollapsed?: boolean
  onSidebarToggle?: () => void
}

export function DashboardShell({
  sidebar,
  topbar,
  children,
  sidebarCollapsed = false,
  onSidebarToggle,
}: DashboardShellProps) {
  return (
    <div className="flex min-h-screen flex-col bg-bg text-fg md:flex-row">
      <a
        href={`#${DASHBOARD_MAIN_ID}`}
        className="sr-only focus:not-sr-only focus:absolute focus:left-0 focus:top-0 focus:z-50 focus:bg-surface focus:text-fg focus:outline focus:outline-accent focus:p-2"
      >
        Skip to main content
      </a>
      <nav
        id={DASHBOARD_SIDEBAR_ID}
        aria-label="Sidebar"
        className={cn(
          'border-b border-border bg-surface md:border-b-0 md:border-r',
          sidebarCollapsed ? 'hidden md:block' : 'block',
        )}
      >
        {onSidebarToggle ? (
          <button
            type="button"
            className="w-full border-b border-border bg-surface-raised px-3 py-2 text-left text-sm font-medium text-fg focus-visible:outline focus-visible:outline-accent md:hidden"
            aria-expanded={!sidebarCollapsed}
            aria-controls={DASHBOARD_SIDEBAR_ID}
            onClick={onSidebarToggle}
          >
            Toggle sidebar
          </button>
        ) : null}
        {sidebar}
      </nav>
      <div className="flex min-w-0 flex-1 flex-col">
        {topbar ? <header role="banner">{topbar}</header> : null}
        <main id={DASHBOARD_MAIN_ID} className="flex-1 p-4">
          {children}
        </main>
      </div>
    </div>
  )
}