---
import type { GetStaticPaths } from "astro";
import Layout from "../../layouts/Layout.astro";
import {
    ALBUM_NAME_ANIMAL_WORLD,
    ALBUM_NAME_ENCHANTED_FOREST,
    ALBUMS,
} from "../../const";

export const getStaticPaths = () => {
    return [
        {
            params: {
                id: ALBUM_NAME_ANIMAL_WORLD,
            },
        },
        {
            params: {
                id: ALBUM_NAME_ENCHANTED_FOREST,
            },
        },
    ];
};

const { id } = Astro.params;
let album = {
    title: "",
    description: "",
    images: [
        {
            url: "",
            desc: "",
        },
    ],
};

if (id == ALBUM_NAME_ANIMAL_WORLD) {
    album = ALBUMS[id];
}

if (id == ALBUM_NAME_ENCHANTED_FOREST) {
    album = ALBUMS[id];
}
---

<Layout>
    <div class="grid grid-cols-1">
        <div class="flex flex-col justify-center items-center">
            <article class="mt-12 mx-2 prose-sm md:prose">
                <h1>{album.title}</h1>
                <p>{album.description}</p>
            </article>
            <section class="mt-12 max-w-6xl">
                <!-- {
                    album.images.map((item) => (
                        <div class="card">
                            <figure>
                                <img
                                    class="object-cover h-64"
                                    src={item.url}
                                    alt={item.desc}
                                />
                            </figure>
                            <div class="card-body text-center">
                                <h2 class="card-title" />
                                <p>{item.desc}</p>
                            </div>
                        </div>
                    ))
                } -->
    
                <div class="carousel w-full md:rounded-2xl">
                    {
                        album.images.map((item, i, items) => (
                            <div
                                id={"side-" + i}
                                class="carousel-item relative w-full"
                            >
                                <img
                                    src={item.url}
                                    class="w-full"
                                    alt={item.desc}
                                />
                                <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
                                    <a
                                        href={
                                            "#side-" +
                                            (i == 0 ? items.length - 1 : i - 1)
                                        }
                                        class="btn btn-circle btn-sm md:btn-md"
                                    >
                                        ❮
                                    </a>
                                    <a
                                        href={
                                            "#side-" +
                                            (i == items.length - 1 ? 0 : i + 1)
                                        }
                                        class="btn btn-circle btn-sm md:btn-md"
                                    >
                                        ❯
                                    </a>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </section>
        </div>
    </div>
</Layout>