import React from 'react';
import { useDashboardChart } from '../hooks/useApi';
import SimpleChart from './SimpleChart';

interface Props {
  chartName: string;
  filters?: Record<string, any>;
}

const ChartTile: React.FC<Props> = ({ chartName, filters }) => {
  const { data, loading, error } = useDashboardChart(chartName, filters);

  return (
    <div className="bg-white rounded-lg shadow p-4 overflow-auto">
      <div className="flex items-center justify-between mb-3">
        <h4 className="text-sm font-semibold text-gray-800">{chartName}</h4>
      </div>
      {loading && <div className="text-sm text-gray-500">Loading…</div>}
      {error && <div className="text-sm text-red-600">{error}</div>}
      {!loading && !error && data && (
        <SimpleChart type={data.type} labels={data.labels} datasets={data.datasets} />
      )}
    </div>
  );
};

export default ChartTile;


