import { Device } from '@/types';
import {
    BatteryCharging,
    BatteryFull,
    BatteryLow,
    BatteryMedium,
    BatteryWarning,
} from 'lucide-react';

/**
 * Shows the last reported battery level (and charging state) of a device.
 * Renders nothing when the device never reported a battery level (e.g. gateways).
 */
export default function DeviceBatteryIndicator({ device }: { device: Device }) {
    const level = device.battery;

    if (level === null || level === undefined) {
        return null;
    }

    const charging = device.charging === true;

    const Icon = charging
        ? BatteryCharging
        : level >= 80
          ? BatteryFull
          : level >= 50
            ? BatteryMedium
            : level >= 20
              ? BatteryLow
              : BatteryWarning;

    const color = charging
        ? 'stroke-emerald-600'
        : level >= 50
          ? 'stroke-emerald-600'
          : level >= 20
            ? 'stroke-amber-500'
            : 'stroke-red-500';

    return (
        <span className="inline-flex items-center gap-1 text-sm text-zinc-600">
            <Icon className={`h-5 w-5 ${color}`} />
            {level}%
        </span>
    );
}