import React from 'react';
import { Menu } from './components/menu';
import { Sidebar } from './components/sidebar';
import { PodcastEmptyPlaceholder } from './components/podcast-empty-placeholder';
import { AlbumArtwork } from './components/album-artwork';
import { listenNowAlbums, madeForYouAlbums } from './data/albums';
import { playlists } from './data/playlists';

export default function TemplatesPage() {
  return (
    <div className="min-h-screen bg-white">
      <Menu />
      <div className="flex">
        <div className="w-64 border-r border-gray-200">
          <Sidebar playlists={playlists} />
        </div>
        <div className="flex-1 p-4 overflow-auto">
          <div className="mb-8">
            <h2 className="text-2xl font-bold">Listen Now</h2>
            <p className="text-gray-500">Top picks for you. Updated daily.</p>
            <div className="flex overflow-x-auto py-4 space-x-4">
              {listenNowAlbums.map((album) => (
                <AlbumArtwork
                  key={album.name}
                  album={album}
                  width={250}
                  height={330}
                />
              ))}
            </div>
          </div>
          <div className="mb-8">
            <h2 className="text-2xl font-bold">Made for You</h2>
            <p className="text-gray-500">Your personal playlists. Updated daily.</p>
            <div className="flex overflow-x-auto py-4 space-x-4">
              {madeForYouAlbums.map((album) => (
                <AlbumArtwork
                  key={album.name}
                  album={album}
                  width={150}
                  height={150}
                  aspectRatio="square"
                />
              ))}
            </div>
          </div>
          <PodcastEmptyPlaceholder />
        </div>
      </div>
    </div>
  );
}