<script>
	import { onMount } from 'svelte';
	import {
		generateAuthSig,
		getStoredAuthSig,
		logout
	} from '$lib/services/authWithMetamask/authWithMetamask';

	let authSig = null;
	let error = null;

	async function handleAuth() {
		try {
			authSig = await generateAuthSig();
		} catch (err) {
			error = err.message;
		}
	}

	function handleLogout() {
		logout();
		authSig = null;
	}

	onMount(() => {
		authSig = getStoredAuthSig();
	});
</script>

<!-- AuthSig Address Displayed -->
{#if authSig}
	<div class="flex items-center p-4 mb-4 bg-gray-100 rounded-lg shadow-md">
		<p class="font-medium text-gray-700">
			Metamask Address: <span class="text-orange-500">{authSig.address}</span>
		</p>
		<button
			class="px-4 py-2 ml-4 font-bold text-white bg-red-500 rounded-lg shadow-lg hover:bg-red-600"
			on:click={handleLogout}
		>
			Logout
		</button>
	</div>
	<!-- Error Message -->
{:else if error}
	<div class="flex items-center p-4 mb-4 bg-red-100 rounded-lg shadow-md">
		<p class="font-medium text-red-700">{error}</p>
	</div>
	<!-- Login Button -->
{:else}
	<div class="flex justify-center">
		<button
			class="flex items-center px-4 py-2 m-2 font-bold text-white bg-orange-500 rounded-lg shadow-lg hover:bg-orange-600"
			on:click={handleAuth}
		>
			<img
				src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg"
				alt="MetaMask"
				class="w-6 h-6 mr-2"
			/>
			<span class="text-lg">Login</span>
		</button>
	</div>
{/if}
