import React from 'react'

function getTypeColor(fileType: string): string {
  if (fileType.startsWith('image/')) return 'bg-blue-100 text-blue-800'
  if (fileType.startsWith('text/')) return 'bg-green-100 text-green-800'
  if (fileType.startsWith('audio/')) return 'bg-purple-100 text-purple-800'
  if (fileType.startsWith('video/')) return 'bg-red-100 text-red-800'
  return 'bg-stone-100 text-stone-800'
}

export default function TypeBadge({ type }: { type: string }): JSX.Element {
  return (
    <span
      className={`px-2 py-1 text-[10px] font-semibold rounded ${getTypeColor(
        type,
      )} transition-all duration-300`}
    >
      {type}
    </span>
  )
}
