import React from 'react';
import { Playlist } from "../data/playlists"

interface SidebarProps {
  playlists: Playlist[]
}

export function Sidebar({ playlists }: SidebarProps) {
  return (
    <div className="p-3">
      <div className="mb-5">
        <h2 className="text-lg font-bold mb-2">Discover</h2>
        <div className="space-y-1 ml-2">
          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Listen Now</button>
          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Browse</button>
          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Radio</button>
        </div>
      </div>
      <div className="mb-5">
        <h2 className="text-lg font-bold mb-2">Library</h2>
        <div className="space-y-1 ml-2">
          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Playlists</button>
          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Songs</button>
          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Made for You</button>
          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Artists</button>
          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Albums</button>
        </div>
      </div>
      <div>
        <h2 className="text-lg font-bold mb-2">Playlists</h2>
        <div className="max-h-72 overflow-y-auto">
          {playlists?.map((playlist, i) => (
            <button key={i} className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">
              {playlist}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}