<script lang="ts">
	import { resolve } from "$app/paths";
	import Button from "#lib/components/ui/Button.svelte";
	import Link from "#lib/components/ui/Link.svelte";

	interface Props {
		message?: string;
	}

	let { message = "to add to the discussion." }: Props = $props();
</script>

<div
	class="flex flex-wrap items-center gap-xs rounded-md bg-background-info-subtle p-md edge-ring ring-background-info-subtle-hover"
>
	<Button variant="primary" href={resolve("/signup")}>Sign up</Button>
	<span>
		or
		<Link href={resolve("/login")} class="underline">Sign in</Link>
		{message}
	</span>
</div>