/**
 * Alert component for displaying notifications.
 *
 * @package GetMD
 * @since   1.0.1
 */

import * as React from 'react';

export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info';
}

const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  ({ className = '', variant = 'default', ...props }, ref) => {
    const variantClasses = {
      default: 'smx-bg-muted smx-border-border smx-text-foreground',
      destructive: 'smx-bg-destructive-light smx-border-destructive/30 smx-text-destructive',
      success: 'smx-bg-success-light smx-border-success/30 smx-text-success',
      warning: 'smx-bg-warning-light smx-border-warning/30 smx-text-warning-foreground',
      info: 'smx-bg-info-light smx-border-info/30 smx-text-info',
    };

    return (
      <div
        ref={ref}
        role="alert"
        className={`smx-relative smx-w-full smx-rounded-lg smx-border smx-p-4 ${variantClasses[variant]} ${className}`}
        {...props}
      />
    );
  }
);
Alert.displayName = 'Alert';

const AlertDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className = '', ...props }, ref) => (
  <div
    ref={ref}
    className={`smx-text-sm [&_p]:smx-leading-relaxed ${className}`}
    {...props}
  />
));
AlertDescription.displayName = 'AlertDescription';

export { Alert, AlertDescription };