import React from "react";
import { Badge } from "@/shared/common/ui/badge";
import useCounter from "@/record-management/components/hooks/useCounter";

// Define all possible count types for type safety
export type CountTitle =
  | "Approval"
  | "Incoming"
  | "External"
  | "Internal"
  | "CC"
  | "Pending";

interface CountProps {
  title: CountTitle;
}

const Counter: React.FC<CountProps> = ({ title }) => {
  const {
    incomingCount,
    approvalCount,
    internalIncomingCount,
    externalIncomingCount,
    ccIncomingCount,
    pendingCount,
  } = useCounter();

  // Type-safe count mapping
  const countMap: Record<CountTitle, number> = {
    Approval: approvalCount ?? 0,
    Incoming: incomingCount ?? 0,
    External: externalIncomingCount ?? 0,
    Internal: internalIncomingCount ?? 0,
    CC: ccIncomingCount ?? 0,
    Pending: pendingCount ?? 0,
  };

  const count = countMap[title];

  // Don't render if count is 0 or undefined
  if (!count) return 0;

  return (
    <Badge className="px-2 py-0 text-xs rounded-full bg-muted text-foreground ml-auto">
      {count}
    </Badge>
  );
};

export default Counter;
