import Image from 'next/image'

interface IconWrapperProps {
  name: string
  alt?: string
  size?: number
  className?: string
}

export function IconWrapper({ name, alt, size = 32, className = '' }: IconWrapperProps) {
  const iconPath = `/icons/${name}.png`

  return <Image src={iconPath} alt={alt || name} width={size} height={size} className={className} />
}

export function EmailIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
  return <IconWrapper name="Email" size={size} className={className} />
}

export function TerminalIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
  return <IconWrapper name="Terminal" size={size} className={className} />
}

export function FolderIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
  return <IconWrapper name="Folder" size={size} className={className} />
}

export function DocumentIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
  return <IconWrapper name="Document" size={size} className={className} />
}

export function SettingsIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
  return <IconWrapper name="Settings" size={size} className={className} />
}

export function NetworkIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
  return <IconWrapper name="Network" size={size} className={className} />
}