'use client';

import { useState, useEffect } from 'react';

interface AlbumSelectProps {
    onAlbumSelect: (albumId: string) => void;
}

async function fetchAlbums() {
    const data = await fetch("https://jsonplaceholder.typicode.com/albums");
    return await data.json();
}

export default function AlbumSelect({ onAlbumSelect }: AlbumSelectProps) {
    const [selectedAlbum, setSelectedAlbum] = useState('');
    const [albums, setAlbums] = useState([]);

    // We cannot use async functions in client components, we need to put
    // async code in a useEffect hook
    useEffect(() => {
        fetchAlbums().then((albums) => {
            if (albums.length > 0) {
                setSelectedAlbum(albums[0].id);
                setAlbums(albums);
            }
        });
    }, []);

    const handleChange = (event) => {
        setSelectedAlbum(event.target.value);
        onAlbumSelect(event.target.value);
    };


    return (
        <select name="albumIdSelect" id="albumIdSelect" onChange={handleChange} value={selectedAlbum}>
            {albums.map((album) => (
                <option key={album.id} value={album.id}>{album.title}</option>
            ))}
        </select>
    );
}