import React, { memo } from "react";
import { MappedStatusBadge, type StatusBadgeProps } from "@/components/ui/StatusBadge";

type PaymentStatus = "paid" | "unpaid" | string;

interface PaymentStatusBadgeProps {
  status: PaymentStatus;
}

const statusMap: Record<
  string,
  { label: string; status: StatusBadgeProps["status"] }
> = {
  paid: {
    label: "Bezahlt",
    status: "success",
  },
  succeeded: {
    label: "Erfolgreich",
    status: "success",
  },
  completed: {
    label: "Abgeschlossen",
    status: "success",
  },
  pending: {
    label: "Ausstehend",
    status: "warning",
  },
  processing: {
    label: "In Bearbeitung",
    status: "warning",
  },
  requires_action: {
    label: "Aktion erforderlich",
    status: "warning",
  },
  requires_confirmation: {
    label: "Bestätigung erforderlich",
    status: "warning",
  },
  requires_capture: {
    label: "Erfassung erforderlich",
    status: "warning",
  },
  unpaid: {
    label: "Unbezahlt",
    status: "error",
  },
  failed: {
    label: "Fehlgeschlagen",
    status: "error",
  },
  cancelled: {
    label: "Storniert",
    status: "error",
  },
  canceled: {
    label: "Storniert",
    status: "error",
  },
  requires_payment_method: {
    label: "Zahlungsmethode erforderlich",
    status: "error",
  },
};

/**
 * ⚡ Optimization: Memoized PaymentStatusBadge
 * Refactored to use the generic MappedStatusBadge primitive for better composition.
 */
export const PaymentStatusBadge = memo(({ status }: PaymentStatusBadgeProps) => {
  return <MappedStatusBadge status={status} mapping={statusMap} />;
});

PaymentStatusBadge.displayName = "PaymentStatusBadge";