<script>
    import Icon from "./icon.svelte";

    import CatIcon from "$lib/images/icons/misc/cat.svg";
	import TelegramIcon from "$lib/images/icons/social/telegram.svg";
    import MatrixIcon from "$lib/images/icons/social/matrix.svg";
    import GiteaIcon from "$lib/images/icons/social/gitea.svg";
    import DiscordIcon from "$lib/images/icons/social/discord.svg";

</script>

<footer class="footer prevent-select">

    <div class="container">
        <p class="social-row footer__social-notice">Me on other resources:</p>
    </div>
    
    <div class="social-row footer__social-spacer"></div>
    <div class="social-row footer__social-links">
        <Icon image={TelegramIcon} size="32px"/>
        <Icon image={MatrixIcon} size="32px"/>
        <Icon image={DiscordIcon} size="32px"/>
    </div>

    <div class="footer-column footer__column1">
        <p class="footer-column-title">Мясо</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitrtempor invidunt ut aliquyam erat, sed diam voluptua. At vero eo</p>

    </div>
    <div class="footer-column footer__column2">
        <p class="footer-column-title">Мясо</p>
        <p>Buy a slave</p>
        <p>Hire me please</p>
        <p>Buy me a coffee</p>
        <p>Help</p>
    </div>
    <div class="footer-column footer__column3">
        <p class="footer-column-title">Мясо</p>
        <p>Мясо</p>
        <p>Мясо</p>
    </div>

    <p class="footer__copyright">(C) WeirdCat 2024</p>

</footer>

<style>

    ::before,
    ::after {
        box-sizing: inherit;
    }

    .footer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "social-notice spacer social-links"
                             "column1 column2 column3"
                             "copyright copyright copyright";

        background-color: var(--col_footer);
    }

    .social-row {
        padding: 20px;
        background-color: var(--col_panel);
    }

    .footer-column {

        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 30px 90px;

        font-family: "Montserrat" sans-serif;
        font-size: 20px;
        color: var(--col_text_footer);
        background-color: var(--col_footer);
    }

    .footer-column > * {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;

    }

    .footer-column-title {

        position: relative;
        padding-bottom: 5px;

        font-family: "Source_Sans_3" sans-serif;
        font-weight: bold;

    }

    .footer-column-title::after {
        content: "";
        background-color: var(--col_text_footer);
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 45%;
    }

    /*FIXME: Make another class title here*/
    .container {
        grid-area: social-notice;
        color: var(--col_panel);
        margin: 0;
    }

    .footer__social-notice {

        margin: 0;
        padding: 20px;
        height: 32px;

        font-family: 'Source_Sans_3' sans-serif;
        font-weight: bold;
        font-size: 20px;

        color: var(--col_text_panel);
    }

    .footer__social-spacer {

        grid-area: spacer;
        width: auto;

    }

    .footer__social-links {

        display: flex;
        justify-content: right;
        gap: 20px;
        grid-area: social-links;
        width: 1fr;

    }

    .footer__copyright {
        grid-area: copyright;
        margin: auto 0 0 0;
        height: fit-content;
        width: 100%;

        font-family: "Montserrat" sans-serif;
        font-size: 24px;
        color: var(--col_text_copyright);

        text-align: center;

        background-color: var(--col_footer_copyright);
    }

</style>