'use client';

import React from 'react';
import styles from './SimpleChart.module.css';

interface Props {
  data: { label: string; value: number }[];
  height?: number;
  color?: string;
  formatValue?: (val: number) => string;
}

export default function SimpleChart({ data, height = 200, color = 'var(--electric-blue)', formatValue = val => val.toString() }: Props) {
  if (!data || data.length === 0) return <div style={{ height, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)' }}>No data available</div>;

  const maxVal = Math.max(...data.map(d => d.value), 1);

  return (
    <div className={styles.chartWrap} style={{ height }}>
      <div className={styles.barsContainer}>
        {data.map((item, i) => {
          const percentage = (item.value / maxVal) * 100;
          return (
            <div key={i} className={styles.barGroup}>
              <div className={styles.barTrack}>
                <div 
                  className={styles.barFill} 
                  style={{ height: `${percentage}%`, background: color }}
                  title={`${item.label}: ${formatValue(item.value)}`}
                >
                  <div className={styles.tooltip}>{item.label}: {formatValue(item.value)}</div>
                </div>
              </div>
              <div className={styles.label}>{item.label}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
