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

type FulfillmentStatus = "shipped" | "unfulfilled" | "canceled" | string;

interface FulfillmentStatusBadgeProps {
  status: FulfillmentStatus;
}

const statusMap: Record<
  string,
  { label: string; status: StatusBadgeProps["status"] }
> = {
  fulfilled: {
    label: "Erfüllt",
    status: "success",
  },
  shipped: {
    label: "Versendet",
    status: "success",
  },
  unfulfilled: {
    label: "Offen",
    status: "warning",
  },
  "partially-fulfilled": {
    label: "Teilweise erfüllt",
    status: "warning",
  },
  canceled: {
    label: "Storniert",
    status: "error",
  },
  cancelled: {
    label: "Storniert",
    status: "error",
  },
};

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

FulfillmentStatusBadge.displayName = "FulfillmentStatusBadge";