import React from 'react';
import { 
  Folder, 
  FileText, 
  FileCode, 
  FileImage, 
  FileVideo, 
  File as FileGeneric,
  Server,
  Monitor,
  ArrowUp,
  ArrowDown,
  CheckCircle,
  XCircle,
  Clock,
  RefreshCw,
  FolderOpen
} from 'lucide-react';
import { FileType } from '../types';

export const FileIcon: React.FC<{ name: string; type: FileType; className?: string }> = ({ name, type, className }) => {
  if (type === FileType.FOLDER) return <Folder className={`text-blue-500 fill-blue-500/20 ${className}`} />;
  
  const ext = name.split('.').pop()?.toLowerCase();
  
  if (['png', 'jpg', 'jpeg', 'gif', 'svg'].includes(ext || '')) return <FileImage className={`text-purple-600 ${className}`} />;
  if (['mp4', 'mov', 'avi'].includes(ext || '')) return <FileVideo className={`text-pink-600 ${className}`} />;
  if (['js', 'ts', 'tsx', 'html', 'css', 'json', 'py', 'php'].includes(ext || '')) return <FileCode className={`text-yellow-600 ${className}`} />;
  if (['txt', 'md', 'log'].includes(ext || '')) return <FileText className={`text-slate-500 ${className}`} />;
  
  return <FileGeneric className={`text-slate-400 ${className}`} />;
};