'use client'

import React from 'react'

interface ChartDataPoint {
  value: number
  label?: string
  color?: string
}

interface BarChartProps {
  className?: string
  data?: ChartDataPoint[]
}

const BarChart: React.FC<BarChartProps> = ({ className = '', data }) => {
  const barData = (Array.isArray(data) && data.length > 0)
    ? data.map(d => ({ value: d.value, color: d.color || 'rgb(42, 157, 144)' }))
    : Array.from({ length: 12 }, () => ({ value: 0, color: 'rgb(42, 157, 144)' }))

  const maxVal = Math.max(...barData.map(b => b.value || 0), 1)

  return (
    <div className={`w-full h-full ${className}`}>
      <svg className="w-full h-full" viewBox="0 0 635 200">
        <g>
          {barData.map((bar, index) => {
            const barWidth = 40
            const barSpacing = 12
            const x = index * (barWidth + barSpacing) + 20
            const barHeight = (bar.value / maxVal) * 160
            const y = 180 - barHeight
            
            return (
              <rect
                key={index}
                x={x}
                y={y}
                width={barWidth}
                height={barHeight}
                fill={bar.color}
                rx="4"
                ry="4"
              />
            )
          })}
        </g>
      </svg>
    </div>
  )
}

export default BarChart