import { ShieldCheck, Signal, Smartphone, Trash2 } from 'lucide-react'
import type { Device } from '../../types'
import { conditionText, connectionText, getStatusClass } from '../../types'

type DeviceMainCardProps = {
  device: Device
}

export function DeviceMainCard({ device }: DeviceMainCardProps) {
  return (
    <div className="device-card device-card--main">
      <div className="device-main">
        <div className="device-main__image">
          {device.image ? (
            <img src={device.image} alt={device.model ?? 'Устройство'} />
          ) : (
            <Smartphone size={84} />
          )}
        </div>

        <div className="device-main__info">
          <h2>{device.model ?? '-'}</h2>

          <p>{device.factoryNumber}</p>
          <p>
            {device.imei}
            {device.serialNumber ? ` · ${device.serialNumber}` : ''}
          </p>

          <div className="device-main__divider" />

          <div className="device-main__statuses">
            <div className={`device-status ${getStatusClass(device.condition)}`}>
              <ShieldCheck size={17} />
              {conditionText[device.condition]}
            </div>

            <div className={`device-status ${getStatusClass(device.connection)}`}>
              <Signal size={17} />
              {device.connectionText ?? connectionText[device.connection]}
            </div>

            {device.workTime && (
              <div className="device-status is-muted">
                <Smartphone size={17} />
                В работе: {device.workTime}
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="device-main__bottom">
        <div className="device-registered">
          <Smartphone size={17} />
          <div className="device-registered-info">
            <span>Зарегистрирован</span>
            <b>{device.registeredAt ?? '10:00 20.04.2026'}</b>
          </div>
        </div>

        <div className="device-card__actions">
          <button className="device-history-btn" type="button">
            Подробная история эксплуатации
          </button>

          <button className="device-delete-btn" type="button" aria-label="Удалить">
            <Trash2 size={18} />
          </button>
        </div>
      </div>
    </div>
  )
}