---
import { Icon } from "astro-icon/components";
import { getContacts } from "../queries";

const contacts = await getContacts();
---

{
	contacts && (
		<div class="contacts">
			<a target="_blank" href={"mailto:" + contacts.email}>
				Email
				<Icon name="email" width="18" height="18" />
			</a>
			<a target="_blank" href={contacts.github}>
				Github
				<Icon name="github_filled" width="18" height="18" />
			</a>
			<a target="_blank" href={contacts.telegram}>
				Telegram
				<Icon name="telegram" width="18" height="18" />
			</a>
		</div>
	)
}

<style lang="scss">
	.contacts {
		display: flex;
		align-items: center;
		column-gap: 10px;
		margin-right: 30px;
		& a {
			text-decoration: none;
			font-size: 0;
			&:hover {
				opacity: var(--opacity-hover);
			}
		}
	}
	@media screen and (max-width: 768px) {
		.contacts {
			margin-right: 0;
			margin-top: 2.5rem;
			& a {
				margin-right: 0.2rem;
			}
			& svg {
				width: 21px;
				height: 21px;
			}
		}
	}
</style>