Uecko_ERP/modules/customer-invoices/src/web/components/customer-invoice-status-badge.tsx

import { Badge } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { forwardRef } from "react";
import { useTranslation } from "../i18n";

export type CustomerInvoiceStatus = "draft" | "sent" | "approved" | "rejected" | "issued";

export type CustomerInvoiceStatusBadgeProps = {
  status: string | CustomerInvoiceStatus; // permitir cualquier valor
  dotVisible?: boolean;
  className?: string;
};

const statusColorConfig: Record<CustomerInvoiceStatus, { badge: string; dot: string }> = {
  draft: {
    badge:
      "bg-gray-500/10 dark:bg-gray-500/20 hover:bg-gray-500/10 text-gray-600 border-gray-400/60",
    dot: "bg-gray-500",
  },
  sent: {
    badge:
      "bg-amber-500/10 dark:bg-amber-500/20 hover:bg-amber-500/10 text-amber-500 border-amber-600/60",
    dot: "bg-amber-500",
  },
  approved: {
    badge:
      "bg-emerald-500/10 dark:bg-emerald-500/20 hover:bg-emerald-500/10 text-emerald-500 border-emerald-600/60",
    dot: "bg-emerald-500",
  },
  rejected: {
    badge:
      "bg-red-500/10 dark:bg-red-500/20 hover:bg-red-500/10 text-red-500 border-red-600/60",
    dot: "bg-red-500",
  },
  issued: {
    badge:
      "bg-blue-600/10 dark:bg-blue-600/20 hover:bg-blue-600/10 text-blue-500 border-blue-600/60",
    dot: "bg-blue-500",
  },
};

export const CustomerInvoiceStatusBadge = forwardRef<
  HTMLDivElement,
  CustomerInvoiceStatusBadgeProps
>(({ status, dotVisible, className, ...props }, ref) => {
  const { t } = useTranslation();
  const normalizedStatus = status.toLowerCase() as CustomerInvoiceStatus;
  const config = statusColorConfig[normalizedStatus];
  const commonClassName = "transition-colors duration-200 cursor-pointer shadow-none rounded-full";

  if (!config) {
    return (
      <Badge ref={ref} className={cn(commonClassName, className)} {...props}>
        {status}
      </Badge>
    );
  }

  return (
    <Badge className={cn(commonClassName, config.badge, className)} {...props}>
      {dotVisible && <div className={cn("h-1.5 w-1.5 rounded-full mr-2", config.dot)} />}
      {t(`catalog.status.${normalizedStatus}`, { defaultValue: status })}
    </Badge>
  );
});

CustomerInvoiceStatusBadge.displayName = "CustomerInvoiceStatusBadge";