<script lang="ts">
	import LoginForm from '$lib/components/forms/login-form.svelte';
	import SignupForm from '$lib/components/forms/signup-form.svelte';
	import * as Tabs from '$lib/components/ui/tabs/index.js';

	let tabValue = $state('login');
</script>

<div class="flex h-full items-center justify-center pt-4 md:pb-42">
	<div class="mx-4 w-full max-w-sm flex-col gap-6">
		<Tabs.Root bind:value={tabValue}>
			<Tabs.List class="grid w-full grid-cols-2">
				<Tabs.Trigger value="login">Login</Tabs.Trigger>
				<Tabs.Trigger value="signup">Sign Up</Tabs.Trigger>
			</Tabs.List>
			<div class="min-h-[480px]">
				<Tabs.Content value="login">
					{#if tabValue === 'login'}
						<LoginForm />
					{/if}
				</Tabs.Content>

				<Tabs.Content value="signup">
					{#if tabValue === 'signup'}
						<SignupForm bind:tabValue />
					{/if}
				</Tabs.Content>
			</div>
		</Tabs.Root>
	</div>
</div>
