import React from 'react'
import {
  FileText,
  ImageIcon,
  Table2,
  FileSpreadsheet,
  Video,
  Music,
  Code,
  File,
  Globe,
  PresentationIcon,
} from 'lucide-react'

export interface FileIconConfig {
  icon: React.ElementType
  color: string
}

export function getFileIconConfig(fileType: string): FileIconConfig {
  const t = (fileType || '').toLowerCase()

  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(t))
    return { icon: ImageIcon, color: 'text-chart-2' }
  if (t === 'pdf')
    return { icon: FileText, color: 'text-destructive' }
  if (['xls', 'xlsx'].includes(t))
    return { icon: FileSpreadsheet, color: 'text-success' }
  if (t === 'csv')
    return { icon: Table2, color: 'text-success' }
  if (['ppt', 'pptx'].includes(t))
    return { icon: PresentationIcon, color: 'text-warning' }
  if (['doc', 'docx'].includes(t))
    return { icon: FileText, color: 'text-primary' }
  if (['mp4', 'mov', 'avi', 'webm'].includes(t))
    return { icon: Video, color: 'text-chart-3' }
  if (['mp3', 'm4a', 'wav', 'ogg'].includes(t))
    return { icon: Music, color: 'text-chart-4' }
  if (['js', 'ts', 'tsx', 'jsx', 'py', 'sh', 'bash', 'json'].includes(t))
    return { icon: Code, color: 'text-muted-foreground' }
  if (['html', 'htm'].includes(t))
    return { icon: Globe, color: 'text-brand' }
  if (['md', 'txt'].includes(t))
    return { icon: FileText, color: 'text-muted-foreground' }

  return { icon: File, color: 'text-muted-foreground' }
}