import { useParams } from 'react-router-dom';
import { Media, Staff, MediaCategory } from '../../types';
import BrowseView from '../BrowseView';

interface CategoryBrowseRouteProps {
  mediaList: Media[];
  onMediaClick: (media: Media) => void;
  itemsPerPage?: number;
  gridItemSize?: number;
  onGridItemSizeChange: (size: number) => void;
  loading: boolean;
}

export default function CategoryBrowseRoute({
  mediaList,
  onMediaClick,
  itemsPerPage,
  gridItemSize,
  onGridItemSizeChange,
  loading
}: CategoryBrowseRouteProps) {
  const { category } = useParams<{ category: string }>();
  
  // Map URL path to category
  const categoryMap: Record<string, MediaCategory> = {
    'anime': 'Anime',
    'movies': 'Movies',
    'tv-series': 'TV Series',
    'music': 'Music',
    'books': 'Books',
    'games': 'Games',
    'consoles': 'Consoles',
    'adult': 'Adult'
  };

  const activeCategory = category ? categoryMap[category] : 'Anime';

  return (
    <BrowseView
      mediaList={mediaList}
      onMediaClick={onMediaClick}
      activeCategory={activeCategory}
      itemsPerPage={itemsPerPage}
      gridItemSize={gridItemSize}
      onGridItemSizeChange={onGridItemSizeChange}
      loading={loading}
    />
  );
}