import { type ReactNode } from 'react';

import {
  type ParticipationItem,
  type ParticipationSegmentFilter,
  type SortFilter,
} from '../../../types';

export type ParticipationDashboardProps = {
  segments: ParticipationSegmentFilter[];
  selectedSegment: ParticipationSegmentFilter | undefined;
  onSegmentChange: (segment: ParticipationSegmentFilter) => void;
  showSort?: boolean;
  sortOrder: SortFilter;
  onSortChange: (order: SortFilter) => void;
  showSearch?: boolean;
  searchQuery?: string;
  onSearchChange?: (value: string) => void;
  items: ParticipationItem[] | undefined;
  isLoading?: boolean;
  isPreviousData?: boolean;
  renderChildren?: (item: ParticipationItem, isExpanded: boolean) => ReactNode;
  noDataMessage: string;
  emptyState: {
    title: string;
    description: string;
  };
  formatRatioLabel: (completed: number, total: number) => ReactNode;
  paginationController?: ReactNode;
  labels: {
    showBy: string;
    ascending: string;
    descending: string;
    searchPlaceholder: string;
  };
};
