frontend/src/components/ui/Alert.tsx

import { AlertCircle, CheckCircle, Info } from 'lucide-react';

type Variant = 'error' | 'success' | 'info' | 'warning';

interface Props {
  variant: Variant;
  title?: string;
  children: React.ReactNode;
}

const icons: Record<Variant, React.ReactNode> = {
  error: <AlertCircle size={16} />,
  success: <CheckCircle size={16} />,
  info: <Info size={16} />,
  warning: <AlertCircle size={16} />,
};

export function Alert({ variant, title, children }: Props) {
  return (
    <div className={`alert alert--${variant}`} role="alert">
      <span className="alert__icon">{icons[variant]}</span>
      <div className="alert__body">
        {title && <p className="alert__title">{title}</p>}
        <div className="alert__content">{children}</div>
      </div>
    </div>
  );
}