import * as React from 'react'
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from './sheet'
import { cn } from '@/lib/utils'

/**
 * Drawer — adapter с @nstart/ui-style API над Radix Sheet (slide-over).
 * Используется существующим кодом для side panels (record drawer, history,
 * review preview).
 *
 * Props mapping:
 *   isOpen → Sheet.open
 *   onClose → Sheet.onOpenChange
 *   title → SheetTitle
 *   side → SheetContent.side (right default)
 *   widthClassName → custom className на SheetContent (override defaults)
 *   size → SheetContent.size shorthand (sm/md/lg/xl)
 */

export type DrawerProps = {
  isOpen: boolean
  onClose: () => void
  title?: React.ReactNode
  description?: React.ReactNode
  side?: 'left' | 'right' | 'top' | 'bottom'
  size?: 'sm' | 'md' | 'lg' | 'xl'
  widthClassName?: string
  children?: React.ReactNode
}

export function Drawer({
  isOpen,
  onClose,
  title,
  description,
  side = 'right',
  size,
  widthClassName,
  children,
}: DrawerProps) {
  return (
    <Sheet
      open={isOpen}
      onOpenChange={(open) => {
        if (!open) onClose()
      }}
    >
      <SheetContent
        side={side}
        size={size}
        className={cn('overflow-y-auto', widthClassName)}
      >
        {(title || description) && (
          <SheetHeader>
            {title && <SheetTitle>{title}</SheetTitle>}
            {/* Radix Dialog требует accessible description ИЛИ
             * aria-describedby={undefined}. Рендерим SheetDescription всегда
             * когда есть header: визуально если передан description, sr-only
             * fallback иначе — заглушает Radix dev warning + полезно для
             * screen reader users. */}
            {description ? (
              <SheetDescription>{description}</SheetDescription>
            ) : (
              <SheetDescription className="sr-only">
                Боковая панель. Нажмите Escape или кнопку закрытия чтобы вернуться.
              </SheetDescription>
            )}
          </SheetHeader>
        )}
        {children}
      </SheetContent>
    </Sheet>
  )
}
