import React from "react";
import type { AuftragStatus, RechnungStatus } from "../../data/types";
import { AUFTRAG_STATUS_LABEL, RECHNUNG_STATUS_LABEL } from "../../data/types";
import { BADGE_TON } from "../../utils/chartTheme";

/** Farbzuordnung: Endzustände neutral, Problemzustände rot, Laufendes blau. */
const AUFTRAG_TON: Record<AuftragStatus, string> = {
  anfrage: BADGE_TON.neutral,
  aufmass: BADGE_TON.information,
  angebot: BADGE_TON.lila,
  beauftragt: BADGE_TON.teal,
  in_arbeit: BADGE_TON.positiv,
  abgeschlossen: BADGE_TON.neutral,
  verloren: BADGE_TON.negativ,
};

const RECHNUNG_TON: Record<RechnungStatus, string> = {
  entwurf: BADGE_TON.neutral,
  gestellt: BADGE_TON.information,
  bezahlt: BADGE_TON.positiv,
  ueberfaellig: BADGE_TON.negativ,
};

export function AuftragBadge({ status }: { status: AuftragStatus }) {
  return (
    <span className={`inline-block whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-medium ${AUFTRAG_TON[status]}`}>
      {AUFTRAG_STATUS_LABEL[status]}
    </span>
  );
}

export function RechnungBadge({ status }: { status: RechnungStatus }) {
  return (
    <span className={`inline-block whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-medium ${RECHNUNG_TON[status]}`}>
      {RECHNUNG_STATUS_LABEL[status]}
    </span>
  );
}