import { useEffect } from 'react';

/**
 * ResultBanner — bannière succès/erreur avec auto-dismiss et × à droite.
 *
 * Props:
 *   result     : { ok: bool, msg: string } | null
 *   onDismiss  : () => void  — appelé à la fermeture (manuelle ou auto)
 *   delay      : number      — délai auto-dismiss en ms (défaut 4000)
 */
export default function ResultBanner({ result, onDismiss, delay = 4000, style = {} }) {
  useEffect(() => {
    if (!result) return;
    const t = setTimeout(onDismiss, delay);
    return () => clearTimeout(t);
  }, [result, delay, onDismiss]);

  if (!result) return null;

  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '8px 14px',
      borderRadius: 8,
      fontSize: 13,
      background: result.ok ? 'rgba(34,197,94,.1)' : 'rgba(239,68,68,.1)',
      color: result.ok ? '#16a34a' : '#dc2626',
      border: `1px solid ${result.ok ? 'rgba(34,197,94,.3)' : 'rgba(239,68,68,.3)'}`,
      ...style,
    }}>
      <span>{result.msg}</span>
      <button
        onClick={onDismiss}
        style={{
          marginLeft: 16,
          background: 'none',
          border: 'none',
          cursor: 'pointer',
          color: 'inherit',
          fontSize: 18,
          lineHeight: 1,
          padding: '0 2px',
          flexShrink: 0,
        }}
        aria-label="Fermer"
      >×</button>
    </div>
  );
}