// Pane.js

import React from 'react';

function Pane({
  selectedYear,
  selectedGenre,
  selectedRating,
  years = [],
  genres = [],
  ratings = [],
  sorting,
  onYearChange,
  onGenreChange,
  onRatingChange,
  onSortingChange,
}) {
  return (
    

      

        Filters:
        

          Year:
           onYearChange(e.target.value)}
          >
            All
            {years.map((y, i) =>
              {y}
            )}
          
        
        

          Genre:
           onGenreChange(e.target.value)}
          >
            All
            {genres.map((g, i) =>
              {g}
            )}
          
        
        

          Rating:
           onRatingChange(e.target.value)}
          >
            All
            {ratings.map((r, i) =>
              {r}
            )}
          
        
      
      

        Select sorting:
         onSortingChange(e.target.value)}
        >
          Alphabetically
          Year
          Rating
        
      
    
  );
}

export default Pane;