<script lang="ts">
	import * as Card from "$lib/components/ui/card";
	import { Input } from "$lib/components/ui/input";
	import { Label } from "$lib/components/ui/label";
	import { Button } from "$lib/components/ui/button";
	import * as Select from "$lib/components/ui/select";
	import { TriangleAlertIcon } from "lucide-svelte";

</script>

<Card.Root class="space-y-2 p-4">
	<h1 class="font-semibold text-xl text-center">Login</h1>

	<div class="flex w-full max-w-sm flex-col gap-1.5">
		<Label for="username">Username</Label>
		<Input type="text" id="username" placeholder="starkingdoms_player_2122" />
	</div>
	<div class="flex w-full max-w-sm flex-col gap-1.5">
		<Label for="password">Password</Label>
		<Input type="password" id="password" />
	</div>
	<Button class="w-full">Login</Button>
	<p class="text-sm">Don't have an account? <a href="/register" class="text-accent underline underline-offset-4">Register</a></p>
	<p class="text-sm">Just want to play? <a href="/" class="text-accent underline underline-offset-4">Go back</a></p>
</Card.Root>