'use client';

import React from 'react';

interface ActivityItem {
  id: string;
  type: 'exam' | 'user' | 'question' | 'system';
  title: string;
  description: string;
  timestamp: string;
  user?: string;
}

const ActivityIcon: React.FC<{ type: ActivityItem['type'] }> = ({ type }) => {
  const icons = {
    exam: '📝',
    user: '👤',
    question: '❓',
    system: '⚙️'
  };

  const colors = {
    exam: 'bg-blue-100 text-blue-600',
    user: 'bg-green-100 text-green-600',
    question: 'bg-purple-100 text-purple-600',
    system: 'bg-gray-100 text-gray-600'
  };

  return (
    <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm ${colors[type]}`}>
      {icons[type]}
    </div>
  );
};

const RecentActivity: React.FC = () => {
  const activities: ActivityItem[] = [
    {
      id: '1',
      type: 'exam',
      title: 'Ujian Teknik Dasar Memasak',
      description: 'Ujian baru telah dibuat dan dijadwalkan untuk batch A-2024',
      timestamp: '2 menit yang lalu',
      user: 'Chef Ahmad Fauzi'
    },
    {
      id: '2',
      type: 'user',
      title: 'Peserta Baru Terdaftar',
      description: 'Sari Dewi telah mendaftar sebagai peserta pelatihan',
      timestamp: '15 menit yang lalu'
    },
    {
      id: '3',
      type: 'question',
      title: 'Bank Soal Diperbarui',
      description: '25 soal baru ditambahkan ke kategori Food Safety',
      timestamp: '1 jam yang lalu',
      user: 'Chef Rina Sari'
    },
    {
      id: '4',
      type: 'exam',
      title: 'Ujian Selesai',
      description: 'Ujian Kuliner Internasional telah selesai dengan 32 peserta',
      timestamp: '2 jam yang lalu'
    },
    {
      id: '5',
      type: 'system',
      title: 'Backup Otomatis',
      description: 'Backup database berhasil dilakukan',
      timestamp: '3 jam yang lalu'
    }
  ];

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200">
      <div className="p-6 border-b border-gray-200">
        <h3 className="text-lg font-semibold text-gray-900">Aktivitas Terbaru</h3>
      </div>
      <div className="p-6">
        <div className="space-y-4">
          {activities.map((activity) => (
            <div key={activity.id} className="flex items-start space-x-3">
              <ActivityIcon type={activity.type} />
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between">
                  <p className="text-sm font-medium text-gray-900 truncate">
                    {activity.title}
                  </p>
                  <p className="text-xs text-gray-500 whitespace-nowrap ml-2">
                    {activity.timestamp}
                  </p>
                </div>
                <p className="text-sm text-gray-600 mt-1">
                  {activity.description}
                </p>
                {activity.user && (
                  <p className="text-xs text-gray-500 mt-1">
                    oleh {activity.user}
                  </p>
                )}
              </div>
            </div>
          ))}
        </div>
        <div className="mt-6">
          <button className="w-full text-center text-sm text-blue-600 hover:text-blue-800 font-medium">
            Lihat Semua Aktivitas
          </button>
        </div>
      </div>
    </div>
  );
};

export default RecentActivity;