import React from 'react';
import {
  File,
  FileCode,
  FileJson,
  FileText,
  Code,
  Database,
  FileImage,
  FileVideo,
  FileAudio,
  FileSpreadsheet,
  FileArchive,
  FileType,
} from 'lucide-react';
import { getLanguageFromFileName, getLanguageColor } from '@/editor/languages';

interface FileIconProps {
  fileName: string;
  className?: string;
  size?: number;
}

const iconMap: Record<string, React.ComponentType<{ className?: string; size?: number }>> = {
  // Code files
  javascript: FileCode,
  typescript: FileCode,
  jsx: FileCode,
  tsx: FileCode,
  html: Code,
  css: Code,
  json: FileJson,
  sql: Database,
  php: FileCode,
  markdown: FileText,
  plaintext: FileText,
  
  // Default
  default: File,
};

export function getFileIconComponent(fileName: string): React.ComponentType<{ className?: string; size?: number }> {
  const language = getLanguageFromFileName(fileName);
  return iconMap[language] || iconMap.default;
}

export function FileIcon({ fileName, className = '', size = 16 }: FileIconProps) {
  const IconComponent = getFileIconComponent(fileName);
  const language = getLanguageFromFileName(fileName);
  const color = getLanguageColor(language);
  
  return (
    <IconComponent 
      className={className} 
      size={size}
      style={{ color }}
    />
  );
}