IPFS-portal-deploy/src/app/explorer/components/FileIcon.tsx

'use client';

import {
  File,
  FileArchive,
  FileAudio,
  FileCode,
  FileImage,
  FileJson,
  FileSpreadsheet,
  FileText,
  FileVideo,
  Folder,
} from 'lucide-react';

interface FileIconProps {
  name: string;
  type: 'file' | 'dir';
  className?: string;
}

const ext = (name: string): string =>
  name.split('.').pop()?.toLowerCase() ?? '';

const IMAGE_EXTS = new Set([
  'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico',
]);
const VIDEO_EXTS = new Set(['mp4', 'webm', 'mov', 'avi', 'mkv']);
const AUDIO_EXTS = new Set(['mp3', 'wav', 'ogg', 'flac', 'm4a']);
const CODE_EXTS = new Set([
  'js', 'ts', 'jsx', 'tsx', 'py', 'go', 'rs', 'css', 'html',
  'xml', 'yaml', 'yml', 'sh', 'bash',
]);
const ARCHIVE_EXTS = new Set(['zip', 'tar', 'gz', 'rar', '7z']);
const SHEET_EXTS = new Set(['csv', 'xls', 'xlsx']);
const TEXT_EXTS = new Set(['txt', 'md', 'log']);

export default function FileIcon({ name, type, className = 'w-4 h-4' }: FileIconProps) {
  if (type === 'dir') {
    return <Folder className={`${className} text-accent-cyan`} />;
  }

  const e = ext(name);

  if (IMAGE_EXTS.has(e))   return <FileImage     className={`${className} text-surface-400`} />;
  if (VIDEO_EXTS.has(e))   return <FileVideo     className={`${className} text-surface-400`} />;
  if (AUDIO_EXTS.has(e))   return <FileAudio     className={`${className} text-surface-400`} />;
  if (e === 'pdf')         return <FileText      className={`${className} text-accent-rose`} />; // FilePdf niet beschikbaar in deze versie
  if (e === 'json')        return <FileJson      className={`${className} text-surface-400`} />;
  if (CODE_EXTS.has(e))    return <FileCode      className={`${className} text-surface-400`} />;
  if (ARCHIVE_EXTS.has(e)) return <FileArchive   className={`${className} text-surface-400`} />;
  if (SHEET_EXTS.has(e))   return <FileSpreadsheet className={`${className} text-surface-400`} />;
  if (TEXT_EXTS.has(e))    return <FileText      className={`${className} text-surface-400`} />;

  return <File className={`${className} text-surface-400`} />;
}