import { useState } from 'react';
import { Info, CheckCircle2, AlertTriangle, XCircle, X } from 'lucide-react';

const ICONS = { info: Info, success: CheckCircle2, warning: AlertTriangle, error: XCircle };

export function InfoBar({ tone = 'info', children, dismissible = true }) {
  const [visible, setVisible] = useState(true);
  if (!visible) return null;
  const Icon = ICONS[tone] || Info;
  return (
    <div className={`infobar infobar-${tone}`}>
      <Icon />
      <div>{children}</div>
      {dismissible && (
        <button className="infobar-close" onClick={() => setVisible(false)}>
          <X size={14} />
        </button>
      )}
    </div>
  );
}