'use client';

/**
 * AdminVendorDetailIsland — thin island wrapper for the vendor detail page.
 *
 * Combines HydratedIsland (QueryClientProvider + providers) with VendorDetail
 * in a single component so it can be used as a direct `client:only="react"`
 * island in the Astro page.
 *
 * Why: passing a React component as a slot child to a `client:only` island
 * causes Astro's serialization to fail silently (empty 200 body). Using the
 * component as the island root avoids that entirely.
 */

import { HydratedIsland } from '@/components/HydratedIsland';
import { VendorDetail } from './index.js';
import type { VendorDetailData } from './VendorDetail.js';
import type { Locale } from '@/lib/i18n/index.js';

export interface AdminVendorDetailIslandProps {
  vendor: VendorDetailData;
  locale: Locale;
}

export function AdminVendorDetailIsland({ vendor, locale }: AdminVendorDetailIslandProps) {
  return (
    <HydratedIsland locale={locale}>
      <VendorDetail vendor={vendor} initialLocale={locale} />
    </HydratedIsland>
  );
}