import React from 'react';

interface LogEntry {
  id: string;
  message: string;
  type: 'success' | 'warning' | 'error' | 'info';
  timestamp: Date;
}

interface ActivityLogProps {
  entries: LogEntry[];
}

const ActivityLog: React.FC<ActivityLogProps> = ({ entries }) => {
  const getLogColor = (type: LogEntry['type']) => {
    switch (type) {
      case 'success': return 'bg-green-100 text-green-800 border-green-200';
      case 'warning': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'error': return 'bg-red-100 text-red-800 border-red-200';
      case 'info': return 'bg-blue-100 text-blue-800 border-blue-200';
      default: return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  const getLogIcon = (type: LogEntry['type']) => {
    switch (type) {
      case 'success': return '✅';
      case 'warning': return '⚠️';
      case 'error': return '❌';
      case 'info': return 'ℹ️';
      default: return '📝';
    }
  };

  return (
    <div className="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg">
      <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
        📋 Recent Activity
      </h3>
      
      <div className="space-y-3 max-h-64 overflow-y-auto">
        {entries.length === 0 ? (
          <div className="text-gray-500 text-center py-8 italic">
            No recent activity... Your pet is waiting! 🐾
          </div>
        ) : (
          entries.map((entry) => (
            <div
              key={entry.id}
              className={`p-3 rounded-lg border transition-all duration-200 hover:scale-[1.02] ${getLogColor(entry.type)}`}
            >
              <div className="flex items-start gap-2">
                <span className="text-sm">{getLogIcon(entry.type)}</span>
                <div className="flex-1">
                  <p className="text-sm font-medium">{entry.message}</p>
                  <p className="text-xs opacity-70 mt-1">
                    {entry.timestamp.toLocaleTimeString()}
                  </p>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

export default ActivityLog;