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 CustomerStatus = "active" | "inactive";

export type CustomerStatusBadgeProps = {
  status: string; // permitir cualquier valor
  className?: string;
};

const statusColorConfig: Record<CustomerStatus, { badge: string; dot: string }> = {
  inactive: {
    badge:
      "bg-gray-600/10 dark:bg-gray-600/20 hover:bg-gray-600/10 text-gray-500 border-gray-600/60",
    dot: "bg-gray-500",
  },
  active: {
    badge:
      "bg-emerald-600/10 dark:bg-emerald-600/20 hover:bg-emerald-600/10 text-emerald-500 border-emerald-600/60",
    dot: "bg-emerald-500",
  },
};

export const CustomerStatusBadge = forwardRef<HTMLDivElement, CustomerStatusBadgeProps>(
  ({ status, className, ...props }, ref) => {
    const { t } = useTranslation();
    const normalizedStatus = status.toLowerCase() as CustomerStatus;
    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}>
        <div className={cn("h-1.5 w-1.5 rounded-full mr-2", config.dot)} />
        {t(`status.${status}`)}
      </Badge>
    );
  }
);

CustomerStatusBadge.displayName = "CustomerStatusBadge";