'use client';

import { useEffect } from 'react';
import { useCheckoutSettingsStore } from '@/store/checkoutSettingsStore';
import type { CheckoutSettings } from '@/lib/db/queries/getCheckoutSettings';

// Seeds useCheckoutSettingsStore from the value the root layout (Server
// Component) already fetched via getCheckoutSettings() — avoids every
// Client Component doing its own fetch + a flash of the zero/default
// values. Place once inside the root layout, inside the client boundary.
export default function CheckoutSettingsSync(props: CheckoutSettings) {
  const hydrate = useCheckoutSettingsStore((s) => s.hydrate);
  const enabledPaymentMethodsKey = props.enabledPaymentMethods.join(',');

  useEffect(() => {
    hydrate(props);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    hydrate,
    props.deliveryCharge,
    props.freeDeliveryThreshold,
    props.minOrderAmount,
    props.vatPercentage,
    props.vatLabel,
    props.guestCheckoutEnabled,
    enabledPaymentMethodsKey,
  ]);

  return null;
}