import { useMemo } from 'react';
import { useSectorStats } from '@/hooks/api/useSectorStats';
import { getSectorDisplay } from '@/constants';
import { Sector } from '@/types';

export const useDynamicSectors = (limit: number = 6): {
  sectors: Sector[];
  isLoading: boolean;
  error: Error | null;
} => {
  const { data: sectorStats, isLoading, error } = useSectorStats(limit);

  const sectors = useMemo(() => {
    if (!sectorStats) return [];

    return sectorStats.map(stat => {
      const display = getSectorDisplay(stat.sector);
      return {
        nameKey: display.nameKey,
        icon: display.icon,
        colorKey: display.colorKey,
        backendName: stat.sector, // Keep the backend name for API calls
        count: stat.count,
      };
    });
  }, [sectorStats]);

  return {
    sectors,
    isLoading,
    error: error as Error | null,
  };
};