'use client';

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

export default function CreateTeamPage() {
  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>
  );
}