src/components/dashboard/charts/major-chart.tsx

'use client';

import { useAuth } from '@/composables/useAuth';
import { authFetch } from '@/lib/api';
import { useQuery } from '@tanstack/react-query';
import { ChartPie } from '../../ui/ChartPie';

export function MajorChart() {
  const { user } = useAuth()
  const fetchMajor = async (userId: string): Promise<{
    name: string
    value: number
    color: string
  }[]> => {
    if (!userId) return []
    const res = await authFetch(`/api/cv-profile/charts/major?user_id=${userId}`)
    if (!res.ok) throw new Error("Failed to fetch major")
    return res.json()
  }


  const { data = [], isLoading } = useQuery({
    queryKey: ["charts-major", user?.user_id],
    queryFn: () => fetchMajor(user?.user_id ?? ""),
    staleTime: 0, // always fresh
    placeholderData: (prev) => prev, // keep previous data while loading (no flicker)
    refetchOnWindowFocus: false,
    refetchOnMount: false,
  })
  return (
    <ChartPie loading={isLoading} data={data} />
  );
}