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

const vinylByAlbumTitle = vinyl.reduce((acc:any, currentVinyl) => {
    const { album, artist } = currentVinyl;
    if (!acc[album]) {
        acc[album] = {
            vinyls: [],
            artist: artist
        };
    }
    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>
        {vinylData.map((album) => (
            <div class="flex flex-col">
                <li><strong>{album.title}</strong> by {album.artist}</li>
            </div>
        ))}
	</main>
</SectionContainer>

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