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

    interface Props {
        space: Table<"study_spaces">;
        alt: string;
        imgSrc: string;
        href?: string;
        isFavourite: boolean;
        isAvailable?: boolean;
        onToggleFavourite?: () => void;
        footer?: string;
    }

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

<a class="card {isAvailable ? 'green' : 'grey'}" {href}>
    <!-- <img src={imgSrc} {alt} /> -->
    <div class="image-container">
        <img src={imgSrc} {alt} />
        {#if onToggleFavourite}
            <div class="fav-button">
                <Favourite {isFavourite} {onToggleFavourite} />
            </div>
        {/if}
    </div>
    <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 {isAvailable ? 'tagGreen' : 'tagGrey'}">{tag}</span>
                {/each}
            </div>
        {/if}
        <div class="spacer"></div>
        {#if footer}
            <div class="footer">{footer}</div>
        {/if}
    </div>
</a>

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

    h1 {
        margin-bottom: 0.5rem;
        font-size: 1.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;
        color: #eaffeb;
        font-size: 0.875rem;
        cursor: pointer;
        padding: 0.2rem 0.6rem;
    }

    .tagGreen {
        background-color: #2e4653;
    }

    .tagGrey {
        background-color: #189f5e;
    }

    .compulsoryContainer {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr));
        gap: 0.3rem;
        font-size: 0.8rem;
    }

    .image-container {
        position: relative;
    }
    .image-container .fav-button {
        position: absolute;
        top: 0;
        right: 0;
        background: #189f5e;
        border-radius: 0 0 0 0.5rem;
        z-index: 1;
        width: 2.75rem;
        height: 2.75rem;
    }

    .footer {
        width: 100%;
        color: #2e4653;
        background-color: #eaffeb;
        align-self: flex-end;
        border-radius: 0.5rem;
        padding: 0.1rem;
        text-align: center;
        font-weight: bold;
        margin-top: 0.4rem;
    }
</style>
