"use client";

import { useState } from "react";
import type { ClaimSummary } from "@/lib/api/types";
import { ClaimRow } from "./claim-row";

interface ClaimsTableProps {
  claims: ClaimSummary[];
}

export function ClaimsTable({ claims }: ClaimsTableProps) {
  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);

  // Sort by weight_share descending
  const sortedClaims = [...claims].sort((a, b) => b.weight_share - a.weight_share);

  if (sortedClaims.length === 0) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        No claims found for this query.
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between text-xs text-muted-foreground">
        <span>
          {sortedClaims.length} distinct claim{sortedClaims.length !== 1 ? "s" : ""}
        </span>
        <span>Sorted by weight (highest first)</span>
      </div>
      <div className="space-y-2">
        {sortedClaims.map((claim, index) => (
          <ClaimRow
            key={claim.representative_hash}
            claim={claim}
            isLeading={index === 0}
            isExpanded={expandedIndex === index}
            onToggle={() => setExpandedIndex(expandedIndex === index ? null : index)}
          />
        ))}
      </div>
    </div>
  );
}
