import React from "react";
import { useSelector } from "react-redux";

import { Season } from "./season";

export const SeasonsList = () => {
  const seasonNumbers = useSelector((state) => {
    const keys = state.show.show.seasons ? state.show.show.seasons.keys() : [];
    return Array.from(keys);
  });

  return (
    <div className="col col-12 col-md-10 offset-md-1">
      {seasonNumbers.map((season) => (
        <Season key={`season-list-key-${season}`} season={season} />
      ))}
    </div>
  );
};