"use client"

import * as React from "react"
import { Dialog as BaseDialog } from "@base-ui/react/dialog"
import { cn } from "@/lib/utils"

export type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Description> & {
  className?: string
}

const BaseDialogDescription = BaseDialog.Description as React.ElementType

export const DialogDescription = React.forwardRef<HTMLElement, DialogDescriptionProps>(
  ({ className, ...props }, ref) => (
    <BaseDialogDescription
      ref={ref}
      className={cn(
        "text-sm text-neutral-600 dark:text-neutral-400",
        className,
      )}
      {...props}
    />
  ),
)

DialogDescription.displayName = "DialogDescription"