import { getLibrary } from '@/lib/libraries'
import { notFound } from 'next/navigation'
import GamesView from '@/components/games/GamesView'
import MixedView from '@/components/mixed/MixedView'
import MoviesView from '@/components/movies/MoviesView'
import TvView from '@/components/tv/TvView'

interface Props {
  params: Promise<{ id: string }>
  searchParams: Promise<{ path?: string }>
}

export default async function LibraryPage({ params, searchParams }: Props) {
  const { id } = await params
  const { path: subpath } = await searchParams

  const library = getLibrary(id)
  if (!library) notFound()

  return (
    <div>
      <div className="flex items-center gap-2 mb-6">
        <a href="/" className="text-sm transition-colors" style={{ color: 'var(--text-secondary)' }}>
          Libraries
        </a>
        <span style={{ color: 'var(--text-secondary)' }}>/</span>
        <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
          {library.name}
        </span>
      </div>

      {library.type === 'games' && <GamesView libraryId={id} />}
      {library.type === 'mixed' && <MixedView libraryId={id} initialPath={subpath ?? ''} />}
      {library.type === 'movies' && <MoviesView libraryId={id} />}
      {library.type === 'tv' && <TvView libraryId={id} />}
    </div>
  )
}