"use client";

import { useEffect, useState } from "react";
import ActivityCard from "./ActivityCard";
import { API_URL } from '@/lib/api';

interface Activity {
  id: number;
  activityType: string;
  description: string;
  performedBy: string;
  createdAt: string;
}

interface Props {
  entityType: string;
  entityId: number;
  onCountChange?: (count: number) => void;
}

export default function ActivityTimeline({ entityType, entityId, onCountChange }: Props) {
  const [activities, setActivities] = useState<Activity[]>([]);

  function loadActivities() {
    fetch(`${API_URL}/api/activity/${entityType}/${entityId}`)
      .then((res) => res.json())
      .then((data) => {
        setActivities(data);
        onCountChange?.(data.length);
      })
      .catch(console.error);
  }

  useEffect(() => {
    loadActivities();
  }, [entityId]);

  return (
    <div className="space-y-5">
      {activities.length === 0 ? (
        <div className="rounded-xl border border-dashed border-slate-300 p-8 text-center text-slate-500">
          No activity yet.
        </div>
      ) : (
        activities.map((activity) => (
          <ActivityCard key={activity.id} activity={activity} />
        ))
      )}
    </div>
  );
}