---

import NavBar from "../../components/NavBar.astro";
import TimeZone from "../../components/TimeZone.vue";
import Layout from "../../layouts/Layout.astro";
import TimeFormat from "../../components/TimeFormat.vue";
import UnixTime from "../../components/UnixTime.vue";

const navLinks = [
	{
		img: {
			src: '/icons/arrow-left.svg',
			alt: 'Back to Utilities',
		},
		to: '/utilities',
		name: 'Utilities',
	},
	{
		img: {
			src: '/icons/home.svg',
			alt: 'Go Home',
		},
		to: '/',
		name: 'Home',
	},
];
---

<Layout title="VännerBästa | Time" navLinks={navLinks}>
	<div class="container grid place-items-center">
	<div class="grid place-items-center">
		<h1 class="text-6xl font-bold underline p-4">Time Utilities</h1>
		<p class="p-4">
			Your current timezone:
			<TimeZone client:load />
		</p>

		<UnixTime client:load/>

		<p class="p-4">
			To format the time for Discord, you can use: <br />
			<TimeFormat formats={[{
							day: 'numeric',
							month: 'long',
							year: 'numeric',
						}, {hour: '2-digit', minute: '2-digit'}]} dFormat="f" client:only />
			<br />
			<TimeFormat formats={[{
							weekday: 'long',
							day: 'numeric',
							month: 'long',
							year: 'numeric',
						}, { hour: '2-digit', minute: '2-digit', }]} dFormat="F" client:only />
			<br />
			<TimeFormat formats={[{
							hour: '2-digit',
							minute: '2-digit',
						}]} dFormat="t" client:only />
			<br />
			<TimeFormat formats={[{
							hour: '2-digit',
							minute: '2-digit',
							second: '2-digit',
						}]} dFormat="T" client:only />
			<br />
			<TimeFormat formats={[{
							day: '2-digit',
                            month: '2-digit',
                            year: 'numeric',
						}]} dFormat="d" client:only />
			<br />
			<TimeFormat formats={[{
							day: 'numeric',
                            month: 'long',
                            year: 'numeric',
						}]} dFormat="D" client:only />
		</p>
	</div>
</Layout>