import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { Info, CheckCircle2, AlertTriangle, XCircle } from 'lucide-react'
import { cn } from '../lib/cn'

const alertVariants = cva(
  'relative flex gap-2 rounded border p-4 text-body-2',
  {
    variants: {
      variant: {
        default: 'bg-surface border-line text-ink',
        success: 'bg-surface border-success text-ink',
        warning: 'bg-surface border-warning text-ink',
        error: 'bg-surface border-danger text-ink',
        info: 'bg-surface border-info text-ink',
      },
    },
    defaultVariants: { variant: 'default' },
  },
)

// State is conveyed by icon + text, never color alone.
const iconMap = {
  default: Info,
  success: CheckCircle2,
  warning: AlertTriangle,
  error: XCircle,
  info: Info,
} as const

export interface AlertProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof alertVariants> {
  variant?: 'default' | 'success' | 'warning' | 'error' | 'info'
  title?: string
}

export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  ({ className, variant = 'default', title, children, ...props }, ref) => {
    const Icon = iconMap[variant ?? 'default']
    return (
      <div
        ref={ref}
        role="alert"
        className={cn(alertVariants({ variant }), className)}
        {...props}
      >
        <Icon className="h-4 w-4 shrink-0" aria-hidden="true" />
        <div className="flex flex-col gap-2">
          {title ? <p className="font-medium">{title}</p> : null}
          {children ? <div>{children}</div> : null}
        </div>
      </div>
    )
  },
)
Alert.displayName = 'Alert'