interface HourlyHeatmapProps {
  data: number[]
  testId?: string
}

export function HourlyHeatmap({ data, testId }: HourlyHeatmapProps): React.JSX.Element {
  const max = Math.max(...data, 1)
  return (
    <div className="hourly-heatmap" data-testid={testId}>
      {data.map((value, hour) => (
        <div
          key={hour}
          className="hourly-heatmap-cell"
          title={`${hour}:00`}
          style={{
            opacity: value > 0 ? 0.35 + (value / max) * 0.65 : 0.2,
            background: value > 0 ? 'var(--accent)' : undefined
          }}
        />
      ))}
    </div>
  )
}