import React from 'react';
import { useFindMatches } from '@/hooks/api';
import { useTranslation } from '@/hooks/useI18n';
import DataCard from '@/components/ui/DataCard';
import MatchCard from '@/components/matches/MatchCard';

interface MatchesListProps {
  resourceId: string;
  maxDistanceKm?: number;
  minScore?: number;
  limit?: number;
}

const MatchesList: React.FC<MatchesListProps> = ({
  resourceId,
  maxDistanceKm,
  minScore,
  limit,
}) => {
  const { t } = useTranslation();
  const {
    data: matchesData,
    isLoading,
    error,
  } = useFindMatches(resourceId, {
    max_distance_km: maxDistanceKm,
    min_score: minScore,
    limit,
  });

  return (
    <DataCard
      title={t('matches.title')}
      data={matchesData?.matches}
      count={matchesData?.count}
      isLoading={isLoading}
      error={error}
      emptyMessage={t('matches.noMatches')}
      renderItem={(match) => <MatchCard key={match.ID} match={match} />}
    />
  );
};

export default React.memo(MatchesList);