import React from 'react';

const BarChart = ({ data = [], height = 80, barW = 24 }) => {
  if (!data || data.length === 0) return null;

  const max = Math.max(...data, 1);

  return (
    <div className='flex w-full items-end justify-between' style={{ height }}>
      {data.map((v, i) => {
        const pct = Math.max(2, Math.round((v / max) * 100));
        return (
          <div
            key={i}
            className='flex flex-1 justify-center'
          >
            <div
              className='rounded-sm bg-blue-500'
              style={{ height: `${pct}%`, width: barW }}
            />
          </div>
        );
      })}
    </div>
  );
};

export default BarChart;