type StatusPillProps = {
  active: boolean | null | undefined;
  activeLabel?: string;
  inactiveLabel?: string;
};

export function StatusPill({
  active,
  activeLabel = "Ativo",
  inactiveLabel = "Inativo",
}: StatusPillProps) {
  if (active === null || active === undefined) {
    return (
      <span className="rounded-full bg-slate-200 px-2 py-1 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">
        --
      </span>
    );
  }

  return (
    <span
      className={
        active
          ? "rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300"
          : "rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-300"
      }
    >
      {active ? activeLabel : inactiveLabel}
    </span>
  );
}