// src/components/dashboard/ActivityTimeline.tsx
import { CheckCircle2, Clock, Package, Link2 } from 'lucide-react';

interface Activity {
  type: string;
  reference: string;
  status: string;
  timestamp: string;
  action: string;
}

const getActivityIcon = (type: string, status: string) => {
  if (type === 'order' && status === 'completed') {
    return <CheckCircle2 className="h-5 w-5 text-green-500" />;
  }
  if (type === 'order') {
    return <Package className="h-5 w-5 text-blue-500" />;
  }
  if (type === 'link') {
    return <Link2 className="h-5 w-5 text-purple-500" />;
  }
  return <Clock className="h-5 w-5 text-gray-500" />;
};

export default function ActivityTimeline({ activities }: { activities: Activity[] }) {
  return (
    <div className="bg-white rounded-2xl border border-gray-200 p-6">
      <h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h2>
      
      {activities.length === 0 ? (
        <p className="text-gray-500 text-center py-8">No recent activity</p>
      ) : (
        <div className="space-y-4">
          {activities.map((activity, index) => (
            <div key={index} className="flex items-start space-x-3">
              <div className="shrink-0">
                {getActivityIcon(activity.type, activity.status)}
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm text-gray-900">
                  {activity.action}
                  <span className="font-medium ml-1">{activity.reference}</span>
                </p>
                <p className="text-xs text-gray-500 mt-1">
                  {new Date(activity.timestamp).toLocaleString()}
                </p>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}