import type React from 'react'
import { EmptyState } from './EmptyState'

interface HourBarsProps {
  hours: { hour: number; count: number }[]
}

export function HourBars({ hours }: HourBarsProps): React.JSX.Element {
  if (hours.length !== 24) {
    return <EmptyState glyph="∅" copy="no activity yet" />
  }

  const maxCount = Math.max(...hours.map(h => h.count), 1)

  return (
    <>
      <svg
        viewBox="0 0 240 70"
        style={{ display: 'block', width: '100%', height: 70 }}
        preserveAspectRatio="none"
      >
        {hours.map(({ hour, count }) => {
          const barH = Math.max(2, (count / maxCount) * 68)
          const x = hour * 10 + 1
          const isOffPeak = hour < 9 || hour > 19
          return (
            <rect
              key={hour}
              x={x}
              y={70 - barH}
              width={8}
              height={barH}
              fill="var(--accent)"
              opacity={isOffPeak ? 0.45 : 0.85}
            />
          )
        })}
      </svg>
      <div
        className="flex muted mono"
        style={{ justifyContent: 'space-between', fontSize: 9.5, marginTop: 4 }}
      >
        <span>00</span>
        <span>06</span>
        <span>12</span>
        <span>18</span>
        <span>24</span>
      </div>
    </>
  )
}