import type { TargetStatus } from "../../shared/api";
import { GroupHeader } from "./GroupHeader";
import { PrimaryTable } from "tdesign-react";
import { TARGET_TABLE_COLUMNS } from "../constants/target-table-columns";

interface TargetGroupProps {
  name: string;
  targets: TargetStatus[];
  onTargetClick: (target: TargetStatus) => void;
}

export function TargetGroup({ name, targets, onTargetClick }: TargetGroupProps) {
  const up = targets.filter((t) => t.latestCheck?.matched).length;
  const down = targets.length - up;

  return (
    <div>
      <GroupHeader name={name} total={targets.length} up={up} down={down} />
      <PrimaryTable
        columns={TARGET_TABLE_COLUMNS}
        data={targets}
        rowKey="id"
        size="small"
        stripe
        hover
        bordered
        defaultSort={[{ sortBy: "latestCheck.matched", descending: true }]}
        onRowClick={({ row }) => onTargetClick(row as TargetStatus)}
        rowClassName={({ row }) => {
          const target = row as TargetStatus;
          return target.latestCheck?.matched === false ? "row-down" : "";
        }}
        className="clickable-table"
      />
    </div>
  );
}