import React, { useState, useEffect } from "react";

import type { CallRateResponse, TimeFilter, FilterOption, FiltersResponse } from "../types/statistics";

import React, { useEffect, useState } from "react";
import type { CallRateResponse, FilterOption, FiltersResponse, TimeFilter } from "../types/statistics";

const Statistics: React.FC<StatisticsProps> = ({ 
  clusterId

const Statistics: React.FC<StatisticsProps> = ({
  clusterId,

          timeFilter

          timeFilter,

            {filtersLoading ? (
              <option>Loading filters...</option>
            ) : availableFilters.length === 0 ? (
              <option>No filters available</option>
            ) : (
              availableFilters.map(filter => (
                <option key={filter.id} value={filter.id}>
                  {filter.name}
                </option>
              ))
            )}

            {filtersLoading
              ? <option>Loading filters...</option>
              : availableFilters.length === 0
              ? <option>No filters available</option>
              : (
                availableFilters.map(filter => (
                  <option key={filter.id} value={filter.id}>
                    {filter.name}
                  </option>
                ))
              )}

        <h4 className="font-medium">Hourly Call Rates</h4>

      
      {data.length === 0 && (
        <p className="text-gray-500 mt-4">No call rate data available for this cluster.</p>
      )}

      {data.length === 0 && <p className="text-gray-500 mt-4">No call rate data available for this cluster.</p>}

export default Statistics;

export default Statistics;

[ ] Stats

[X] Stats
[ ] M,F,D,N
[ ] Species selector