import { Activity, User, FileText, BarChart3 } from 'lucide-react'

const RecentActivity = () => {
  const activities = [
    {
      id: 1,
      type: 'user',
      message: 'New user registered: john.doe@example.com',
      time: '2 minutes ago',
      icon: User,
      color: 'text-blue-600 bg-blue-100 dark:bg-blue-900/20'
    },
    {
      id: 2,
      type: 'report',
      message: 'Report generated: Area Analysis - Downtown Dubai',
      time: '15 minutes ago',
      icon: FileText,
      color: 'text-green-600 bg-green-100 dark:bg-green-900/20'
    },
    {
      id: 3,
      type: 'analytics',
      message: 'Forecast generated for Palm Jumeirah properties',
      time: '1 hour ago',
      icon: BarChart3,
      color: 'text-purple-600 bg-purple-100 dark:bg-purple-900/20'
    },
    {
      id: 4,
      type: 'system',
      message: 'API rate limit increased for premium users',
      time: '2 hours ago',
      icon: Activity,
      color: 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/20'
    },
    {
      id: 5,
      type: 'user',
      message: 'User subscription upgraded to Premium',
      time: '3 hours ago',
      icon: User,
      color: 'text-blue-600 bg-blue-100 dark:bg-blue-900/20'
    }
  ]

  return (
    <div className="card p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white">
          Recent Activity
        </h3>
        <Activity className="h-5 w-5 text-gray-400" />
      </div>
      
      <div className="space-y-4">
        {activities.map((activity) => (
          <div key={activity.id} className="flex items-start space-x-3">
            <div className={`p-2 rounded-full ${activity.color}`}>
              <activity.icon className="h-4 w-4" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-xs text-gray-900 dark:text-white">
                {activity.message}
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                {activity.time}
              </p>
            </div>
          </div>
        ))}
      </div>
      
      <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <button className="text-sm text-primary-600 hover:text-primary-500 font-medium">
          View all activity
        </button>
      </div>
    </div>
  )
}

export default RecentActivity

