---
import SectionContainer from '../components/SectionContainer.astro';
import vinyl from '../data/vinyl.json'

const vinylByAlbumTitle = vinyl.reduce((acc:any, currentVinyl) => {
    const { album, artist, cover } = currentVinyl;
    if (!acc[album]) {
        acc[album] = {
            vinyls: [],
            artist: artist,
            cover: cover
        };
    }
    acc[album].vinyls.push(currentVinyl);
    return acc;
}, {});

const vinylData = Object.keys(vinylByAlbumTitle).map(albumTitle => {
    const albumData = vinylByAlbumTitle[albumTitle];
    return {
        title: albumTitle,
        artist: albumData.artist,
        cover: albumData.cover,
        vinyl: albumData.vinyls,
    };
});
---

<SectionContainer>
    <main class="flex flex-col gap-4 mt-4">
		<h1 class="text-3xl font-extrabold">📀 Platesamlinga</h1>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
            {vinylData.map((album) => (
                <div class="flex flex-col">
                    <img
                        src={album.cover}
                        class="w-400"
                    />
                    <p class="font-bold">{album.title}</p>
                    <p>{album.artist}</p>
                </div>
            ))}
        </div>
	</main>
</SectionContainer>

<style>
    li {
        list-style: disc inside;
        padding: 0 0 0 10px;
    }
</style>