<script lang="ts">
	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
	import { faAt } from '@fortawesome/free-solid-svg-icons';
	import { faTelegramPlane, faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons';
	import * as svgCore from '@fortawesome/fontawesome-svg-core';

	svgCore.library.add(faTelegramPlane);
	svgCore.library.add(faTwitter);
	svgCore.library.add(faLinkedin);
	svgCore.library.add(faAt);

	const telegramLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'telegram-plane' };
	const twitterLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'twitter' };
	const linkedinLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'linkedin' };
	const atLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'at' };

	const telegramIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(telegramLookup);
	const twitterIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(twitterLookup);
	const linkedinIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(linkedinLookup);
	const atIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(atLookup);
</script>

<div class="contacts">
	<img src="/profile_pic.webp" alt="profile" class="profile" />
	<div class="links">
		<ul>
			<li>
				<a href="mailto://gianmarco@pettinato.eu"
					><i><FontAwesomeIcon icon={atIconDefinition} /></i> e-mail: gianmarco@pettinato.eu</a
				>
			</li>
			<li>
				<a href="https://t.me/jatus_93"
					><i><FontAwesomeIcon icon={telegramIconDefinition} /></i> telegram: @jatus_93</a
				>
			</li>
			<li>
				<a href="https://twitter.com/jatus_93"
					><i><FontAwesomeIcon icon={twitterIconDefinition} /></i> twitter: @jatus_93</a
				>
			</li>
			<li>
				<a href="https://www.linkedin.com/in/gianmarco-pettinato/"
					><i><FontAwesomeIcon icon={linkedinIconDefinition} /></i> linkedin: Gianmarco Pettinato</a
				>
			</li>
		</ul>
	</div>
</div>

<style lang="scss">
	@import '../../app.scss';

	img.profile {
		border-radius: 50%;
		max-width: 150px;
		// border: solid 1px $border-color;
	}
	.contacts {
		border-radius: $default-border-radius;
		padding: 30px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		margin: auto;
	}
	.links {
		text-align: left;
		ul {
			padding: 0;
			list-style-type: none;
			line-height: 20px;
			white-space: nowrap;
			li {
				padding: 0;
				margin: 10px;
				margin-left: 0px;
				margin-right: 0px;

				a {
					font-size: 18px !important;
				}
			}
		}
	}
	@media (min-width: $min-tablet) {
		.contacts {
			flex-direction: row;
			margin: auto;
		}
		.links {
			ul {
				li {
					a {
						font-size: auto !important;
					}
				}
			}
		}
	}
</style>
