"use client";

import { forwardRef } from "react";
import { StatusPill } from "@/components/atoms/status-pill";
import type { StatusBadgeProps, StatusConfig } from "./types";

const DEFAULT_CONFIG: StatusConfig = {
  variant: "neutral",
};

/**
 * StatusBadge - A configurable status display component.
 *
 * Wraps the StatusPill atom with a configuration-driven approach,
 * allowing domain-specific status mappings to be passed in.
 *
 * @example
 * ```tsx
 * // Simple usage with inline config
 * <StatusBadge
 *   status="active"
 *   configMap={{
 *     active: { variant: "success", label: "Active" },
 *     inactive: { variant: "neutral", label: "Inactive" },
 *   }}
 * />
 *
 * // Or create a domain-specific wrapper
 * const ORDER_STATUS_CONFIG = {
 *   pending: { variant: "warning", icon: <ClockIcon />, label: "Pending" },
 *   completed: { variant: "success", icon: <CheckIcon />, label: "Completed" },
 * };
 *
 * function OrderStatusBadge({ status }) {
 *   return <StatusBadge status={status} configMap={ORDER_STATUS_CONFIG} />;
 * }
 * ```
 */
export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(
  ({ status, configMap, showIcon = true, defaultConfig = DEFAULT_CONFIG, ...props }, ref) => {
    // Normalize status to lowercase for config lookup
    const normalizedStatus = status.toLowerCase();

    // Look up config, fall back to default
    const config = configMap?.[normalizedStatus as keyof typeof configMap] ?? defaultConfig;

    // Determine the label (config label, or original status)
    const label = config.label ?? status;

    return (
      <StatusPill
        ref={ref}
        variant={config.variant ?? "neutral"}
        icon={showIcon ? config.icon : undefined}
        label={label}
        {...props}
      />
    );
  }
);

StatusBadge.displayName = "StatusBadge";
