import React from 'react'
import { View, Text } from '@tarojs/components'
import { ChannelStatusBadge } from './StatusBadge'

interface Props {
  channelId: number
  status: number
  voltage?: number
  current?: number
  onClick?: () => void
}

const COLORS: Record<number, string> = {
  0: '#9ca3af', // idle
  1: '#16a34a', // charging
  2: '#dc2626', // fault
  3: '#d1d5db', // offline
}

export default function ChannelCard({ channelId, status, voltage, current, onClick }: Props) {
  return (
    <View
      style={{
        backgroundColor: '#fff',
        borderRadius: 12,
        padding: 16,
        border: `2px solid ${COLORS[status] || '#e5e7eb'}`,
        cursor: onClick ? 'pointer' : undefined,
      }}
      onClick={onClick}
    >
      <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <Text style={{ fontSize: 24, fontWeight: 600, color: '#111' }}>#{channelId}</Text>
        <ChannelStatusBadge status={status} />
      </View>
      {voltage !== undefined && (
        <Text style={{ fontSize: 22, color: '#6b7280' }}>{voltage.toFixed(1)}V</Text>
      )}
      {current !== undefined && (
        <Text style={{ fontSize: 22, color: '#6b7280' }}>{current.toFixed(1)}A</Text>
      )}
    </View>
  )
}