<script lang="ts">
    import CompulsoryTags from "./CompulsoryTags.svelte";
    import type { Table } from "$lib";

    interface Props {
        space: Table<"study_spaces">;
        alt: string;
        imgSrc: string;
        href?: string;
    }

    const { space, alt, imgSrc, href }: Props = $props();
</script>

<a class="card" {href}>
    <img src={imgSrc} {alt} />
    <div class="description">
        <h1>{space.location}</h1>
        <div class="compulsoryContainer"><CompulsoryTags {space} /></div>
        {#if space.tags.length > 0}
            <div class="tagContainer">
                {#each space.tags as tag (tag)}
                    <span class="tag">{tag}</span>
                {/each}
            </div>
        {/if}
    </div>
</a>

<style>
    .card {
        display: flex;
        flex-direction: column;
        background-color: #49bd85;
        width: 100%;
        max-width: 20rem;
        border-radius: 0.5rem;
        overflow: hidden;
        text-decoration: none;
    }
    .description {
        padding: 0.5rem;
        color: #edebe9;
    }
    img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    h1 {
        margin-bottom: 0.5rem;
    }

    .tagContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        border-radius: 0.5rem;
        background: none;
        padding-top: 0.5rem;
    }

    .tag {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 0.25rem;
        background-color: #2e4653;
        color: #eaffeb;
        font-size: 0.875rem;
        cursor: pointer;
        padding: 0.2rem 0.6rem;
    }

    .compulsoryContainer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        font-size: 0.875rem;
    }
</style>
