'use client'

export function ComponentTypeIcon({ type }: { type: string }) {
  const colors: Record<string, string> = {
    SW: 'bg-blue-100 text-blue-700',
    FW: 'bg-indigo-100 text-indigo-700',
    AI: 'bg-purple-100 text-purple-700',
    HMI: 'bg-pink-100 text-pink-700',
    SENSOR: 'bg-cyan-100 text-cyan-700',
    ACTUATOR: 'bg-orange-100 text-orange-700',
    CONTROLLER: 'bg-green-100 text-green-700',
    NETWORK: 'bg-yellow-100 text-yellow-700',
    MECHANICAL: 'bg-gray-100 text-gray-700',
    ELECTRICAL: 'bg-red-100 text-red-700',
    OTHER: 'bg-gray-100 text-gray-500',
  }
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${colors[type] || colors.OTHER}`}>
      {type}
    </span>
  )
}
