"use client";

import { useQuery } from "@tanstack/react-query";
import { getWorkingGroupIssueStatuses } from "@/features/pswg/working-group-issues/service/working-group-issues-service";
import { IssueStatusBadge as BaseBadge, type IssueStatusBadgeProps } from "./issue-status-badge";

export * from "./issue-status-badge";

// All Issue badges share the same cached status lookup. Other workflow badges
// continue to use the base component without requesting Issue descriptions.
export function IssueStatusBadge(props: IssueStatusBadgeProps) {
  const { data: statuses } = useQuery({
    queryKey: ["working-group-issues", "statuses"],
    queryFn: getWorkingGroupIssueStatuses,
    staleTime: 5 * 60 * 1000,
  });
  const status = statuses?.find(
    (item) =>
      item.name.toLowerCase() === props.status.toLowerCase() ||
      item.code === props.status.toUpperCase().replaceAll(" ", "_"),
  );

  const description = props.description !== undefined
    ? props.description
    : status?.description;

  return <BaseBadge {...props} description={description} />;
}