<script lang="ts">
	import { MetaTags } from 'svelte-meta-tags';
	import Menu from '$lib/elements/MenuBig.svelte';
	let currentLanguage: CurrentLanguage = 'it';
	import { page } from '$app/stores';
	import type { CurrentLanguage } from '$lib/types';
	console.log($page);
</script>

<MetaTags
	title="Gianmarco Pettinato"
	description="This is the Gianmarco's portfolio site"
	canonical="https://pettinato.eu/"
	openGraph={{
		url: 'https://pettinato.eu/',
		title: 'Gianmarco Pettinato',
		description: "This is the Gianmarco's portfolio site",
		images: [
			{
				url: 'https://www.example.ie/og-image-01.jpg',
				width: 800,
				height: 600,
				alt: 'Og Image Alt'
			},
			{
				url: 'https://www.example.ie/og-image-02.jpg',
				width: 900,
				height: 800,
				alt: 'Og Image Alt Second'
			},
			{ url: 'https://www.example.ie/og-image-03.jpg' },
			{ url: 'https://www.example.ie/og-image-04.jpg' }
		],
		site_name: 'Gianmarco Pettinato Portfolio'
	}}
	twitter={{
		handle: '@jatus_93',
		site: '@jatus_93',
		cardType: 'summary',
		title: 'Gianmarco Pettinato Portfolio',
		description: "This is the Gianmarco's portfolio site",
		image: 'https://pettinato.eu/profile_pic.webp',
		imageAlt: 'Gianmarco Photo'
	}}
/>

<main>
	<!-- svelte-ignore a11y-invalid-attribute -->
	<div class="language-selector" id="language-selector">
		<button
			class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
			on:click={() => {
				currentLanguage = 'it';
			}}>it</button
		>
		<button
			class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
			on:click={() => {
				currentLanguage = 'en';
			}}>en</button
		>
	</div>

	<div class="menu">
		<Menu {currentLanguage} />
	</div>
</main>

<style lang="scss">
	@import '../../../app.scss';
	.language-selector {
		right: 0;
		height: 30px;
		text-align: center;
		text-transform: uppercase;
		padding-top: 10px;
		display: flex;
		flex-direction: row;
		justify-content: end;
		position: absolute;
		z-index: 999;
		@media (max-width: $min-desktop) {
			width: 100%;
			position: unset;
			padding-bottom: 10px;
			background-color: $basecolor2;
		}
	}
	.menu {
		background-color: $basecolor2;
		position: sticky;
		position: -webkit-sticky;
		top: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		border-bottom: solid $border-hover-color 1px;
	}

	.custom-button {
		border: 0;
		background: none;
		box-shadow: none;
		border-radius: $default-border-radius;
		border: solid $button-border-color 1px;
		width: 40px;
		cursor: pointer;
		margin-right: 5px;
	}
	.custom-button:hover {
		background-color: $text-color;
		color: $basecolor2;
	}
	.custom-button-active {
		cursor: unset;
		background-color: $text-color;
		color: $basecolor2;
	}
	@media (max-width: $min-tablet) {
		.custom-button {
			font-size: large;
		}
	}
</style>
