turash/bugulma/frontend/components/ui/Alert.tsx

import React from 'react';
import { clsx } from 'clsx';
import { AlertCircle, CheckCircle2, Info, AlertTriangle, X } from 'lucide-react';
import Button from './Button';

export type AlertVariant = 'default' | 'success' | 'warning' | 'error' | 'info';

export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: AlertVariant;
  title?: string;
  description?: string;
  icon?: React.ReactNode;
  dismissible?: boolean;
  onDismiss?: () => void;
  children?: React.ReactNode;
}

const alertIcons = {
  default: Info,
  success: CheckCircle2,
  warning: AlertTriangle,
  error: AlertCircle,
  info: Info,
};

const alertStyles = {
  default: 'bg-background border-border text-foreground',
  success: 'bg-success/10 border-success/20 text-success-foreground',
  warning: 'bg-warning/10 border-warning/20 text-warning-foreground',
  error: 'bg-destructive/10 border-destructive/20 text-destructive-foreground',
  info: 'bg-primary/10 border-primary/20 text-primary-foreground',
};

/**
 * Alert/AlertBanner component for inline notifications
 */
export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  (
    {
      variant = 'default',
      title,
      description,
      icon,
      dismissible = false,
      onDismiss,
      children,
      className,
      ...props
    },
    ref
  ) => {
    const DefaultIcon = alertIcons[variant];
    const displayIcon = icon || <DefaultIcon className="h-4 w-4" />;

    return (
      <div
        ref={ref}
        className={clsx(
          'relative flex gap-3 p-4 rounded-lg border',
          alertStyles[variant],
          className
        )}
        role="alert"
        {...props}
      >
        <div className="flex-shrink-0 mt-0.5">{displayIcon}</div>
        <div className="flex-1 min-w-0">
          {title && (
            <h4 className="text-sm font-semibold mb-1">{title}</h4>
          )}
          {description && (
            <p className="text-sm opacity-90">{description}</p>
          )}
          {children}
        </div>
        {dismissible && onDismiss && (
          <button
            type="button"
            onClick={onDismiss}
            className="flex-shrink-0 rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring transition-opacity"
            aria-label="Dismiss"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>
    );
  }
);
Alert.displayName = 'Alert';