'use client';

import { CreateTeamForm } from '@/components/teams/CreateTeamForm';
import { routes } from '@/lib/routing/RouteConfig';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Section } from '@/ui/Section';
import { useRouter } from 'next/navigation';

/**
 * CreateTeamPageClient
 * 
 * Client wrapper for the Create Team page.
 */
export function CreateTeamPageClient() {
  const router = useRouter();

  const handleNavigate = (teamId: string) => {
    router.push(routes.team.detail(teamId));
  };

  const handleCancel = () => {
    router.back();
  };

  return (
    <Section>
      <Container size="sm">
        <Stack gap={8}>
          <Stack gap={2}>
            <Heading level={1}>Create a Team</Heading>
          </Stack>
          <CreateTeamForm 
            onNavigate={handleNavigate} 
            onCancel={handleCancel}
          />
        </Stack>
      </Container>
    </Section>
  );
}