<script lang="ts">
	import BlueskyLogo from "$lib/assets/Bluesky_Logo.svg";
	import TwitterLogo from "$lib/assets/Twitter_Logo.svg";
</script>

<div class="flex items-center justify-center gap-6">
	<a
		href="https://bsky.app/profile/snail.city"
		target="_blank"
		rel="noopener noreferrer"
		class="inline-flex hover:opacity-80 transition-opacity"
		aria-label="Follow on Bluesky"
		data-umami-event="Bluesky clicked"
	>
		<img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" />
	</a>

	<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div>

	<!-- <a
		href="https://x.com/pupperpowell"
		target="_blank"
		rel="noopener noreferrer"
		class="inline-flex hover:opacity-80 transition-opacity"
		aria-label="Follow on Twitter"
		data-umami-event="Twitter clicked"
	>
		<img src={TwitterLogo} alt="Twitter" class="w-8 h-8" />
	</a>

	<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div> -->

	<a
		href="mailto:george@snail.city"
		class="inline-flex hover:opacity-80 transition-opacity"
		aria-label="Send email"
		data-umami-event="Email clicked"
	>
		<svg
			class="w-8 h-8 text-gray-700 dark:text-gray-300"
			fill="none"
			stroke="currentColor"
			viewBox="0 0 24 24"
			xmlns="http://www.w3.org/2000/svg"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
			></path>
		</svg>
	</a>
</div>
