import React from 'react'
import { SigitFile } from '../../../utils/file'
import { ExtensionFileBox } from '../../ExtensionFileBox'
import { ImageItem } from './ImageItem'

interface FileItemProps {
  file: SigitFile
}

export const FileItem = React.memo(({ file }: FileItemProps) => {
  const content = <ExtensionFileBox extension={file.extension} />
  if (file.isImage) return <ImageItem file={file} />

  return (
    <div key={file.name} className="file-wrapper" id={`file-${file.name}`}>
      {content}
    </div>
  )
})
