import { obtenerCategoria } from "../constants/categorias.js";

export default function CategoriaBadge({ categoria, subcategoria }) {
  if (!categoria) return null;
  const cat = obtenerCategoria(categoria);

  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
      <span style={{ background: cat.bgLight, color: cat.textColor, fontSize: 12, padding: "3px 10px", borderRadius: "var(--border-radius-md)", fontWeight: 500 }}>
        {cat.emoji} {categoria}
      </span>
      {subcategoria && (
        <span style={{ background: "var(--color-background-secondary)", color: "var(--color-text-secondary)", fontSize: 12, padding: "3px 10px", borderRadius: "var(--border-radius-md)" }}>
          {subcategoria}
        </span>
      )}
    </div>
  );
}