// Status pills matching the exact screenshots

const StatusPill = ({ statusKey, label, withHourglass = false, size = 'md' }) => {
  const P = window.PICO;
  const map = {
    offerte: { bg: P.offerteBg, fg: P.offerteFg, hourglass: true },
    installeren: { bg: P.installerenBg, fg: P.installerenFg, hourglass: false },
    schouwen: { bg: P.schouwenBg, fg: P.schouwenFg, hourglass: false },
    accepteren: { bg: P.accepterenBg, fg: P.accepterenFg, hourglass: false },
    matchen: { bg: P.matchenBg, fg: P.matchenFg, hourglass: false },
  };
  const s = map[statusKey] || { bg: P.genericBg, fg: P.genericFg };
  const paddings = size === 'sm' ? '3px 10px' : '5px 12px';
  const fs = size === 'sm' ? 13 : 14;

  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: paddings, borderRadius: 6,
      background: s.bg, color: s.fg,
      fontFamily: '"Plus Jakarta Sans", system-ui', fontWeight: 500,
      fontSize: fs, letterSpacing: -0.1,
      lineHeight: 1, whiteSpace: 'nowrap',
    }}>
      {label}
      {(withHourglass || s.hourglass) && (
        <span style={{ display: 'inline-flex' }}>
          <IcHourglass size={13} color={s.fg} />
        </span>
      )}
    </span>
  );
};

// Category pill (Generiek, Warmtepomp, Zonnepanelen)
const CategoryPill = ({ category }) => {
  const P = window.PICO;
  const iconMap = {
    generic: <IcPersonChat size={16} color="#4B5563" />,
    heatpump: <IcHeatPump size={16} color="#4B5563" />,
    solar: <IcSolar size={16} color="#4B5563" />,
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 10px 5px 8px', borderRadius: 6,
      fontFamily: '"Plus Jakarta Sans", system-ui', fontWeight: 400,
      fontSize: 14, color: '#4B5563', letterSpacing: -0.1,
      lineHeight: 1,
    }}>
      {iconMap[category.icon] || iconMap.generic}
      {category.label}
    </span>
  );
};

Object.assign(window, { StatusPill, CategoryPill });