Alert

<!-- Basic Alert -->
<div class="lyd-alert success">
    <svg class="lyd-alert-icon">...</svg>
    <div class="lyd-alert-content">
        <div class="lyd-alert-title">Title</div>
        <div class="lyd-alert-message">Message text</div>
    </div>
    <button class="lyd-alert-close">
        <svg>...</svg>
    </button>
</div>

<!-- Alert with Actions -->
<div class="lyd-alert info">
    <svg class="lyd-alert-icon">...</svg>
    <div class="lyd-alert-content">
        <div class="lyd-alert-title">Action Required</div>
        <div class="lyd-alert-message">Please take action.</div>
        <div class="lyd-alert-actions">
            <button class="lyd-alert-action primary">Confirm</button>
            <button class="lyd-alert-action">Cancel</button>
        </div>
    </div>
</div>

// components/Alert.tsx
import { ReactNode, useState } from 'react';

interface AlertProps {
  type: 'success' | 'error' | 'warning' | 'info';
  title?: string;
  message: string;
  actions?: Array<{
    label: string;
    onClick: () => void;
    primary?: boolean;
  }>;
  dismissible?: boolean;
  compact?: boolean;
  onClose?: () => void;
}

export const Alert = ({
  type,
  title,
  message,
  actions,
  dismissible = true,
  compact = false,
  onClose
}: AlertProps) => {
  const [isVisible, setIsVisible] = useState(true);
  
  const icons = {
    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',
    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
  };
  
  const handleClose = () => {
    setIsVisible(false);
    onClose?.();
  };
  
  if (!isVisible) return null;
  
  return (
    <div className={`lyd-alert ${type} ${compact ? 'compact' : ''}`}>
      <svg className="lyd-alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={icons[type]} />
      </svg>
      <div className="lyd-alert-content">
        {title && <div className="lyd-alert-title">{title}</div>}
        <div className="lyd-alert-message">{message}</div>
        {actions && (
          <div className="lyd-alert-actions">
            {actions.map((action, index) => (
              <button
                key={index}
                className={`lyd-alert-action ${action.primary ? 'primary' : ''}`}
                onClick={action.onClick}
              >
                {action.label}
              </button>
            ))}
          </div>
        )}
      </div>
      {dismissible && (
        <button className="lyd-alert-close" onClick={handleClose}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      )}
    </div>
  );
};