import styles from './BatteryHealthCard.module.css'

interface BatteryHealthCardProps {
  level: 'high' | 'low'
  value: number
}

export default function BatteryHealthCard({ level, value }: BatteryHealthCardProps) {
  return (
    <div className={styles.card}>
      <BatteryIcon level={level} />
      <div className={styles.content}>
        <span className={styles.value}>{value.toLocaleString()}</span>
        <span className={styles.label}>{level === 'high' ? 'High' : 'Low'}</span>
      </div>
    </div>
  )
}

function BatteryIcon({ level }: { level: 'high' | 'low' }) {
  const fillColor = level === 'high' ? '#4CAF50' : '#FF5252'

  return (
    <svg width="22" height="36" viewBox="0 0 22 36" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Battery body */}
      <rect x="1" y="4" width="20" height="31" rx="3" stroke="white" strokeWidth="1.5" fill="none"/>
      {/* Battery cap */}
      <rect x="7" y="1" width="8" height="3" rx="1" fill="white"/>
      {/* Battery fill */}
      <rect
        x="3"
        y={level === 'high' ? '7' : '22'}
        width="16"
        height={level === 'high' ? '26' : '11'}
        rx="1.5"
        fill={fillColor}
      />
    </svg>
  )
}
