'use client'

import { useState, useEffect } from 'react'
import { Album } from '@/common/album.entity';
import { useParams } from 'next/navigation'

export default function Page() {
  const [album, setAlbum] = useState<Album>();

  const params = useParams<{ id: string }>();
  const id = params.id;

  useEffect(() => {
    async function fetchAlbum(id: string) {
      const response = await fetch(`https://api.anatid.net/album/${id}`);
      const data = await response.json();
      setAlbum(data);
    }
    fetchAlbum(id);
  }, [id]);

  if (!album) return <div>Loading...</div>

  return (
    <ul>
        <li key={album.id}>{album.title} by {album.artist} ({album.genre})</li>
    </ul>
  );
}