import * as React from 'react'
import * as RDialog from '@radix-ui/react-dialog'
import { cn, surface } from './cva'

export const Dialog = RDialog.Root
export const DialogTrigger = RDialog.Trigger
export const DialogPortal = RDialog.Portal
export const DialogClose = RDialog.Close
// Accessible-name path (hard floor): DialogContent renders aria-labelledby/
// aria-describedby pointing at these — a consumer MUST be able to mount them.
export const DialogTitle = RDialog.Title
export const DialogDescription = RDialog.Description

export const DialogContent = React.forwardRef<
  React.ElementRef<typeof RDialog.Content>,
  Omit<React.ComponentPropsWithoutRef<typeof RDialog.Content>, 'className'>
>((props, ref) => (
  <RDialog.Portal>
    <RDialog.Overlay className="fixed inset-0 bg-[var(--mod-color-neutral-a8)]" />
    <RDialog.Content
      ref={ref}
      className={cn(
        surface({ tone: 'surface', radius: 'lg' }),
        'border border-border shadow-[var(--mod-shadow-lg)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]',
      )}
      {...props}
    />
  </RDialog.Portal>
))
DialogContent.displayName = 'DialogContent'