type BatteryCircleProps = {
  value?: number | null
}

function getBatteryColor(value: number) {
  if (value <= 20) return '#E53935'
  if (value <= 50) return '#F59E0B'
  return '#0B28B8'
}

export function BatteryCircle({ value }: BatteryCircleProps) {
  const battery = typeof value === 'number'
    ? Math.max(0, Math.min(100, value))
    : 0

  const size = 180
  const strokeWidth = 14
  const radius = (size - strokeWidth) / 2
  const circumference = 2 * Math.PI * radius

  const dashOffset = circumference * (1 - battery / 100)

  return (
    <div className="battery-circle">
      <svg
        className="battery-circle__svg"
        width={size}
        height={size}
        viewBox={`0 0 ${size} ${size}`}
      >
        <g transform={`rotate(45 ${size / 2} ${size / 2})`}>
          <circle
            className="battery-circle__track"
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            strokeWidth={strokeWidth}
          />
          <circle
            className="battery-circle__progress"
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            strokeWidth={strokeWidth}
            stroke={getBatteryColor(battery)}
            strokeDasharray={circumference}
            strokeDashoffset={dashOffset}
          />
        </g>
      </svg>

      <span className="battery-circle__value">{battery}%</span>
    </div>
  )
}