'use client';

import { useEffect } from 'react';
import { useCurrencyStore } from '@/store/currencyStore';
import type { CurrencyDisplayFormat } from '@/lib/db/queries/getCurrencySettings';

interface CurrencyStoreSyncProps {
  code: string;
  symbol: string;
  format: CurrencyDisplayFormat;
}

// Seeds useCurrencyStore from the value the root layout (Server Component)
// already fetched via getCurrencySettings() — avoids every Client
// Component doing its own fetch + a flash of the USD/$ default. Place once
// inside the root layout, inside the client boundary.
export default function CurrencyStoreSync({ code, symbol, format }: CurrencyStoreSyncProps) {
  const hydrate = useCurrencyStore((s) => s.hydrate);

  useEffect(() => {
    hydrate({ code, symbol, format });
  }, [hydrate, code, symbol, format]);

  return null;
}