import * as React from 'react'

import { cn } from '@/lib/utils'

interface AlertProps {
  children: React.ReactNode
  className?: string
  variant?: 'default' | 'destructive'
}

export function Alert({ children, className, variant = 'default' }: AlertProps) {
  return (
    <div
      role="alert"
      className={cn(
        'relative w-full rounded-lg border p-4 flex gap-3',
        variant === 'destructive'
          ? 'border-red-500/50 bg-red-950/30 text-red-200'
          : 'border-gray-700 bg-gray-800/50 text-gray-200',
        className
      )}
    >
      {children}
    </div>
  )
}

interface AlertDescriptionProps {
  children: React.ReactNode
  className?: string
}

export function AlertDescription({ children, className }: AlertDescriptionProps) {
  return <div className={cn('text-sm flex-1', className)}>{children}</div>
}
