import React from 'react';

const styles = {
  error: 'bg-red-50 border-red-200 text-red-800',
  success: 'bg-green-50 border-green-200 text-green-800',
  warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
  info: 'bg-blue-50 border-blue-200 text-blue-800',
};

export default function Alert({ type = 'error', message, details, onDismiss }) {
  if (!message) return null;
  return (
    <div role="alert" className={`rounded-md border px-4 py-3 text-sm ${styles[type]}`}>
      <div className="flex items-start justify-between gap-2">
        <div className="flex-1">
          <p className="font-medium">{message}</p>
          {details && (
            <ul className="mt-1 list-disc list-inside space-y-0.5 text-xs opacity-80">
              {details.map((d, i) => (
                <li key={i}>{d.field ? `${d.field}: ${d.message}` : d.message}</li>
              ))}
            </ul>
          )}
        </div>
        {onDismiss && (
          <button onClick={onDismiss} className="shrink-0 opacity-60 hover:opacity-100" aria-label="Dismiss">
            ✕
          </button>
        )}
      </div>
    </div>
  );
}
