'use client';

import { cn } from '@/lib/utils';
import { useTranslation } from '@/lib/i18n';
import type { DeviceStatus } from '@/types/device';

const statusColors: Record<string, string> = {
  detected: 'bg-gray-400',
  connecting: 'bg-yellow-400',
  connected: 'bg-green-500',
  flashing: 'bg-yellow-500',
  inferencing: 'bg-blue-500',
  error: 'bg-red-500',
  disconnected: 'bg-gray-400',
};

export function DeviceStatusBadge({ status }: { status: DeviceStatus }) {
  const { t } = useTranslation();

  const statusLabels: Record<string, string> = {
    detected: t('devices.status.detected'),
    connecting: t('devices.status.connecting'),
    connected: t('devices.status.connected'),
    flashing: t('devices.status.flashing'),
    inferencing: t('devices.status.inferencing'),
    error: t('devices.status.error'),
    disconnected: t('devices.status.disconnected'),
  };

  const color = statusColors[status] || statusColors.disconnected;
  const label = statusLabels[status] || statusLabels.disconnected;
  return (
    <div className="flex items-center gap-2">
      <div className={cn('h-2.5 w-2.5 rounded-full', color)} />
      <span className="text-sm">{label}</span>
    </div>
  );
}