import React, { Fragment, useState } from "react";
import CourseCard from "../coursecard";
import { CourseListWrapper } from "./styles";
import PropTypes from "prop-types";

const CourseList = ({ courses, onCourseSelect }) => {
  // const [selectedCourseId, setSelectedCourseId] = useState(null);
  const [selectedCourseIds, setSelectedCourseIds] = useState([]);

  // const handleCourseSelect = (courseId) => {
  //   setSelectedCourseId(courseId);
  //   //console.log(selectedCourseId);
  //   // onCourseSelect(courseId);
  // };

  const handleCourseSelect = (courseId) => {
    if (selectedCourseIds.includes(courseId)) {
      setSelectedCourseIds((prevSelected) =>
        prevSelected.filter((id) => id !== courseId)
      );
    } else {
      // Otherwise, add the course ID to the array
      setSelectedCourseIds((prevSelected) => [...prevSelected, courseId]);
    }
    //console.log(selectedCourseIds);
    // onCourseSelect(courseId); // Adapt this callback for multiple selections if necessary
  };

  return (
    <CourseListWrapper>
      {courses.map((course) => (
        <div
          className="card"
          key={course.id}
          onClick={() => handleCourseSelect(course.id)}>
          <CourseCard
            course={course}
            isSelected={selectedCourseIds.includes(course.id)}
          />
        </div>
      ))}
    </CourseListWrapper>
  );
};

CourseList.propTypes = {
  courses: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired,
      endDate: PropTypes.string.isRequired,
      rating: PropTypes.number.isRequired,
      learnersCount: PropTypes.number.isRequired,
    })
  ).isRequired,
  onCourseSelect: PropTypes.func.isRequired,
};

export default CourseList;
