'use client'

import { cn } from '@/lib/utils'
import type { QuickConnectionItem, QuickConnectionStatus } from '@/mocks/dashboardData'

interface QuickConnectionCardProps {
  item: QuickConnectionItem
  onClick?: (id: string) => void
}

const statusConfig: Record<
  QuickConnectionStatus,
  { dot: string; label: string; text: string }
> = {
  online: { dot: 'bg-success', label: 'En línea', text: 'text-success' },
  advertencia: { dot: 'bg-warning', label: 'Advertencia', text: 'text-warning' },
  offline: { dot: 'bg-gray-500', label: 'Fuera de línea', text: 'text-gray-500' },
}

export default function QuickConnectionCard({ item, onClick }: QuickConnectionCardProps) {
  const config = statusConfig[item.status]
  return (
    <button
      type="button"
      onClick={() => onClick?.(item.id)}
      className={cn(
        'card p-4 text-left transition-all hover:scale-[1.02] hover:border-primary-500/50',
        'flex items-center justify-between gap-3'
      )}
    >
      <span className="font-medium text-gray-200 truncate">{item.name}</span>
      <span className={cn('inline-flex items-center gap-1.5 text-sm shrink-0', config.text)}>
        <span className={cn('h-2 w-2 rounded-full', config.dot)} />
        {config.label}
      </span>
    </button>
  )
}