---
import { Image } from "astro-preload/components";
import { featured, AWESOME_LBRY } from '../config';
---

<section id="featured">
    <div class="text">
        <h2>Featured Projects</h2>
        <p>Check out some cool projects from the community.</p>
    </div>
    <div class="projects">
        {featured.map((slide: object) => (
            <a href={slide.href} target="_blank" class="project">
                <figure><Image url={slide.src || slide.href} height="100%" alt={slide.title}  /></figure>
                <div class="text">
                    <p class="title">{slide.title}</p>
                    <p class="description">{slide.description}</p>
                </div>
            </a>
        ))}
    </div>
    <div class="button-primary"><a href={AWESOME_LBRY} target="_blank">Explore even more!</a></div>
</section>
<style>
    .projects {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }

    .projects .project {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 400px;
        height: 225px;
        overflow: hidden;
        /* padding: 10px; */
        border-radius: 16px;
        transition: 0.3s;
        box-shadow: 2px 2px 2px var(--tertiary-background);
        background-color: var(--secondary-background);
    }

    .projects .project figure {
        display: flex;
        justify-content: center;
        margin: 10px;
        border-radius: 0.5em;
        overflow: hidden;
    }

    .projects .project figure img {
        border-radius: 0.5em;
    }

    /* .projects */

    .projects .project .text {
        position: absolute;
        top: 100%;
        transition: 0.3s;
        width: 100%;
        padding: 10px 20px;
        background-color: var(--tertiary-background);
    }

    .projects .project .text .title {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .projects .project:hover {
        transform: scale(1.1);
    }

    .projects .project:hover .text {
        transform: translateY(-100%);
    }
</style>