"use client";

import React from "react";
import {
  REQUEST_STATUS_META,
  REQUEST_MODE_META,
  CERTIFICATION_TYPE_META,
} from "@/lib/api/mappers/audit-request.mappers";
import type {
  AuditRequestStatus,
  AuditMode,
  CertificationType,
} from "@/lib/api/types/audit-request.types";

const baseBadge: React.CSSProperties = {
  display: "inline-block",
  padding: "3px 10px",
  borderRadius: "12px",
  fontSize: "11px",
  fontWeight: 700,
  letterSpacing: ".02em",
  lineHeight: 1.4,
  whiteSpace: "nowrap",
};

export function RequestStatusBadge({ status }: { status: AuditRequestStatus }) {
  const meta = REQUEST_STATUS_META[status];
  if (!meta) return <span>{status}</span>;
  return (
    <span
      style={{ ...baseBadge, color: meta.color, backgroundColor: meta.bg }}
      title={meta.label}
    >
      {meta.icon} {meta.label}
    </span>
  );
}

export function RequestModeBadge({ mode }: { mode: AuditMode }) {
  const meta = REQUEST_MODE_META[mode];
  if (!meta) return <span>{mode}</span>;
  return (
    <span
      style={{ ...baseBadge, color: meta.color, backgroundColor: meta.bg }}
      title={meta.label}
    >
      {meta.icon} {meta.label}
    </span>
  );
}

export function CertificationTypeBadge({
  type,
}: {
  type: CertificationType;
}) {
  const meta = CERTIFICATION_TYPE_META[type];
  if (!meta) return <span>{type}</span>;
  return (
    <span
      style={{ ...baseBadge, color: meta.color, backgroundColor: meta.bg }}
      title={meta.label}
    >
      {meta.label}
    </span>
  );
}