'use client'

import { cn } from '@/lib/utils'
import type { Device, DeviceStatus } from '@/mocks/mdmDashboardData'

const statusConfig: Record<DeviceStatus, { dot: string; text: string }> = {
  online: { dot: 'bg-green-500', text: 'text-green-400' },
  offline: { dot: 'bg-red-500', text: 'text-red-400' },
  kiosk: { dot: 'bg-blue-500', text: 'text-blue-400' },
}

const statusLabel: Record<DeviceStatus, string> = {
  online: 'Online',
  offline: 'Offline',
  kiosk: 'Kiosk',
}

interface DeviceItemProps {
  device: Device
}

export default function DeviceItem({ device }: DeviceItemProps) {
  const config = statusConfig[device.status]
  return (
    <div className="flex items-center justify-between border-b border-white/5 py-3 last:border-b-0 transition-colors hover:bg-white/5">
      <div className="min-w-0 flex-1">
        <p className="font-medium text-gray-200">{device.name}</p>
        <p className="mt-0.5 text-sm text-gray-500">
          Android {device.androidVersion} · Batería {device.batteryPercent}%
        </p>
      </div>
      <span className={cn('ml-4 inline-flex items-center gap-1.5 text-sm shrink-0', config.text)}>
        <span className={cn('h-2 w-2 rounded-full', config.dot)} />
        {statusLabel[device.status]}
      </span>
    </div>
  )
}