import Link from 'next/link';
import { RegisterForm } from '@/components/auth/RegisterForm';
import { getAppConfig } from '@/lib/app-config';

export default async function RegisterPage() {
	const config = await getAppConfig();

	return (
		<div className='min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center px-4'>
			<div className='w-full max-w-md space-y-6'>
				<div className='text-center'>
					<h1 className='text-3xl font-bold text-foreground mb-2'>🏓 {config.clubName}</h1>
					<p className='text-muted-foreground'>Join our {config.sportName.toLowerCase()} community</p>
				</div>

				<RegisterForm />

				<div className='text-center text-sm'>
					<span className='text-muted-foreground'>Already have an account? </span>
					<Link href='/login' className='text-primary hover:text-primary/80 font-medium'>
						Sign in
					</Link>
				</div>
			</div>
		</div>
	);
}