---
// import footerJson from '../../public/jsonData/footer.json'
// interface aboutList {
//     name: string;
//     frontmatter.link: string;
// }

// interface footerContent {
//     about: aboutList[];
//     resources: aboutList[];
// }

// const footerContent : footerContent = footerJson; 
var aboutContent = await Astro.glob("../content/footer/about/*.md");
var resourcesContent = await Astro.glob("../content/footer/resources/*.md");
---

<div class="footer">
    <div class="footer-content">
        <!-- this is the about section -->
        <ul class="about-list">
            <h2>About</h2>{
                aboutContent.map((item) => {
                    return (
                        <li><a class="footer-links" href={item.frontmatter.link} target="_blank">{item.frontmatter.name}</a></li>
                    )
                })
            }
        </ul>
    </div>
    <div class="footer-content">
        <!-- this is the resources section -->
        <ul>
            <h2>Resources</h2>{
                resourcesContent.map((item) => {
                    return (
                        <li><a class="footer-links" href={item.frontmatter.link} target="_blank">{item.frontmatter.name}</a></li>
                    )
                })
            }
        </ul>
    </div>
    <!-- this is the license section -->
    <div class="license-container">
        <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">
            <img class ="license-img" alt="Creative Commons License" style="border-width:0" src="https://iitb-isro-aicte-mapathon.fossee.in/static/cms/uploads/images/88x31.png">
        </a>
        <p class="license">
            <span>
                This work is licensed under a 
            </span>
            <a href="http://creativecommons.org/licenses/by-sa/4.0/">
                Creative Commons Attribution-ShareAlike 4.0 International License.</p>    
            </a>
    </divmcl>
</div>

  <style>

    a{
        text-decoration: none;
        color: white;
    }

    a:hover{
        color: #f2f2f2;
        text-decoration: underline;
    }
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background-color: #3374ff;
        color: white;
        flex-direction: row;
        padding: 4vh;
    }

    .footer-content {
        display: flex;
        padding: 3vw;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    li{
        font-size: 2.3vh;
    }
    .footer-links{
        text-decoration: none;
        color: aliceblue;
        font-weight: 700;
    }

    .license-container{
        padding: 2vw;
    }

    .about-list a{
        color: white;
    }

    .license span{
        color: black;
    }

    @media screen and (max-width: 554px) {
        .footer {
            flex-direction: column;
        }
        .footer-content {
            padding: 2vh;
        }
        li{
            font-size: 2vh;
        }
        .license{
            font-size: 2vh;
            padding: 5vw;
            text-align: center;
        }
        .license-img{
            margin: auto;
        }
  }


  </style>