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

	interface Props {
		message?: string;
	}

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

<div
	class="flex flex-wrap items-center gap-2 rounded-sm border border-foreground-warning bg-background-warning-subtle p-4 typography-paragraph-small text-foreground-warning-strong drop-shadow-xs"
>
	<Button variant="primary" href={resolve("/signup")}>Sign up</Button>
	<span>or</span>
	<a href={resolve("/login")} class="text-foreground-warning-strong underline">Login</a>
	<span>{message}</span>
</div>
