import type { ComponentProps } from 'react'
import { Alert, AlertAction, AlertDescription, AlertTitle } from '@cfdm/ui/components/alert'
import { cn } from '@cfdm/ui/lib/utils'

export type AppAlertProps = ComponentProps<typeof Alert>
export type AppAlertTitleProps = ComponentProps<typeof AlertTitle>
export type AppAlertDescriptionProps = ComponentProps<typeof AlertDescription>
export type AppAlertActionProps = ComponentProps<typeof AlertAction>

export function AppAlert({ className, ...props }: AppAlertProps) {
  return <Alert className={cn(className)} {...props} />
}

export function AppAlertTitle({ className, ...props }: AppAlertTitleProps) {
  return <AlertTitle className={cn(className)} {...props} />
}

export function AppAlertDescription({
  className,
  ...props
}: AppAlertDescriptionProps) {
  return <AlertDescription className={cn(className)} {...props} />
}

export function AppAlertAction({ className, ...props }: AppAlertActionProps) {
  return <AlertAction className={cn(className)} {...props} />
}