import { Activity } from "@/super-admin/hooks/useDashboardData";
import { formatDistanceToNow } from "date-fns";
import { t } from "i18next";

interface ActivityTimelineProps {
  activities: Activity[];
}

export const ActivityTimeline = ({ activities }: ActivityTimelineProps) => {
  if (!activities || activities.length === 0) {
    return (
      <div className="text-sm text-muted-foreground text-center py-4">
        {t("organization.noRecentActivities")}
      </div>
    );
  }

  return (
    <div className="relative pl-6">
      <div className="absolute left-2 top-2 bottom-2 w-0.5 bg-primary" />
      <ul className="space-y-6">
        {activities.map((activity) => (
          <li key={activity.id} className="relative pl-4">
            <div className="absolute left-0 top-1 w-3 h-3 bg-primary rounded-full" />
            <div className="text-xs text-muted-foreground">
              {formatDistanceToNow(new Date(activity.timestamp), {
                addSuffix: true,
              })}
            </div>
            <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
              {activity.description}
            </div>
            <div className="text-xs">
              By{" "}
              <span className="font-medium text-primary">
                {activity.user}
              </span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};
