import { useCallback } from 'react';
import { api, type Stats } from '../api';
import { usePolling } from '../hooks/usePolling';
import { StatsCards } from '../components/StatsCards';
import { LiveFeed } from '../components/LiveFeed';
import { SourceChart } from '../components/SourceChart';

export function Overview() {
  const fetcher = useCallback(() => api.stats(), []);
  const { data: stats, loading, error } = usePolling<Stats>(fetcher, 5000);

  return (
    <div className="space-y-6">
      <StatsCards stats={stats} loading={loading} error={error} />
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          <LiveFeed />
        </div>
        <div>
          <SourceChart stats={stats} />
        </div>
      </div>
    </div>
  );
}
