"use client";

import { useState } from "react";
import { useActivityFeed, ActivityFilterType } from "@/hooks/use-activity-feed";
import { ActivityStatsContent } from "@/components/activity/activity-stats";
import { ActivityFeedContent } from "@/components/activity/activity-feed";

export function ActivityPageClient() {
  const [filterType, setFilterType] = useState<ActivityFilterType>("all");
  const [projectId, setProjectId] = useState<string>("all");

  const { activities, projects, loading, error, refresh } = useActivityFeed({
    limit: 100,
    projectId: projectId === "all" ? undefined : projectId,
    filterType: filterType === "all" ? undefined : filterType,
  });

  return (
    <>
      <ActivityStatsContent activities={activities} loading={loading} />
      <ActivityFeedContent
        activities={activities.slice(0, 50)}
        projects={projects}
        loading={loading}
        error={error}
        refresh={refresh}
        filterType={filterType}
        onFilterTypeChange={setFilterType}
        projectId={projectId}
        onProjectIdChange={setProjectId}
      />
    </>
  );
}