'use client';

import { use, useEffect } from 'react';
import { FamilyGroupView } from '@/components/family/family-group-view';
import { useFamilyOverlay } from '@/components/family/family-overlay-provider';
import { IdShell } from '@/components/id/shell';

function FamilyGroupPageContent({ groupId }: { groupId: string }) {
  const { setSelectedGroupId } = useFamilyOverlay();

  useEffect(() => {
    setSelectedGroupId(groupId);
  }, [groupId, setSelectedGroupId]);

  return <FamilyGroupView groupId={groupId} />;
}

export default function FamilyGroupPage({ params }: { params: Promise<{ groupId: string }> }) {
  const { groupId } = use(params);

  return (
    <IdShell active="/family" fullBleed>
      <FamilyGroupPageContent groupId={groupId} />
    </IdShell>
  );
}