'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 defaultData = [
    { value: 80, color: 'rgb(42, 157, 144)' },
    { value: 65, color: 'rgb(42, 157, 144)' },
    { value: 90, color: 'rgb(42, 157, 144)' },
    { value: 45, color: 'rgb(42, 157, 144)' },
    { value: 75, color: 'rgb(42, 157, 144)' },
    { value: 55, color: 'rgb(42, 157, 144)' },
    { value: 85, color: 'rgb(42, 157, 144)' },
    { value: 70, color: 'rgb(42, 157, 144)' },
    { value: 60, color: 'rgb(42, 157, 144)' },
    { value: 95, color: 'rgb(42, 157, 144)' },
    { value: 40, color: 'rgb(42, 157, 144)' },
    { value: 80, color: 'rgb(42, 157, 144)' }
  ]

  const barData = (Array.isArray(data) && data.length > 0)
    ? data.map(d => ({ value: d.value, color: d.color || 'rgb(42, 157, 144)' }))
    : defaultData

  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