export function Loader({ text = "Cargando..." }) {
  return (
    <div className="loader-wrap">
      <div className="spinner" />
      <div className="loader-text">{text}</div>
    </div>
  );
}

export function ErrorBox({ msg }) {
  return <div className="error-box">⚠️ {msg}</div>;
}

export function Filters({ children }) {
  return <div className="filters">{children}</div>;
}

export function Select({ label, value, options, onChange }) {
  return (
    <div className="filter-group">
      {label && <label>{label}</label>}
      <select value={value} onChange={(e) => onChange(e.target.value)}>
        {options.map((o) => {
          const val = typeof o === "object" ? o.value : o;
          const txt = typeof o === "object" ? o.label : o;
          return <option key={val} value={val}>{txt}</option>;
        })}
      </select>
    </div>
  );
}
