import { useParams } from 'react-router-dom';
import { PlaylistEditor } from '../components/PlaylistEditor';
import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';

export function PlaylistDetailPage() {
  const { playlistId } = useParams<{ playlistId: string }>();

  if (!playlistId) {
    return (
      <div className="text-center py-8">
        <h1 className="text-2xl font-bold">Playlist not found</h1>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Back Button */}
      <Button
        variant="ghost"
        onClick={() => window.history.back()}
      >
        <ArrowLeft className="h-4 w-4 mr-2" />
        Back to Playlists
      </Button>

      {/* Playlist Editor */}
      <PlaylistEditor playlistId={playlistId} />
    </div>
  );
}

export default PlaylistDetailPage;

