import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import SimpleBarChart from './SimpleBarChart';

type Props = {
  flowsByType: Record<string, number>;
  flowsBySector: Record<string, number>;
  t: (key: string) => string;
};

const ResourceFlowAnalyticsSection = ({ flowsByType, flowsBySector, t }: Props) => {
  const byType = Object.entries(flowsByType || {}).map(([label, value]) => ({ label, value }));
  const bySector = Object.entries(flowsBySector || {}).map(([label, value]) => ({ label, value }));

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('analyticsDashboard.resourceFlows')}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <SimpleBarChart data={byType.slice(0, 6)} title={t('analyticsDashboard.flowsByType')} />
          </div>
          <div>
            <SimpleBarChart
              data={bySector.slice(0, 6)}
              title={t('analyticsDashboard.flowsBySector')}
            />
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default ResourceFlowAnalyticsSection;