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

type Props = {
  topNeeds: Array<{ label: string; value: number }>;
  topOffers: Array<{ label: string; value: number }>;
  marketGaps: Array<{ label: string; value: number }>;
  t: (key: string) => string;
};

const SupplyDemandSection = ({ topNeeds, topOffers, marketGaps, t }: Props) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('analyticsDashboard.supplyDemand')}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <SimpleBarChart
            data={topNeeds.slice(0, 6).map((n) => ({ label: n.label, value: n.value }))}
            title={t('analyticsDashboard.topNeeds')}
          />
          <SimpleBarChart
            data={topOffers.slice(0, 6).map((o) => ({ label: o.label, value: o.value }))}
            title={t('analyticsDashboard.topOffers')}
          />
          <SimpleBarChart
            data={marketGaps.slice(0, 6).map((g) => ({ label: g.label, value: g.value }))}
            title={t('analyticsDashboard.marketGaps')}
          />
        </div>
      </CardContent>
    </Card>
  );
};

export default SupplyDemandSection;