import React from "react";

const CourseChapter = ({ chapters }) => {
  return (
    <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
      <div
        className="rounded py-5 px-4"
        style={{ backgroundColor: "#196EC033" }}
      >
        {/* top */}
        <div className="flex flex-row items-center justify-between">
          <div>
            <h2 className="text-blue-800 text-base">سرفصل دوره</h2>
          </div>
          <div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
            <span className="text-blue-800 text-sm px-2">علوم تجربی</span>
            <span className="text-blue-800 text-sm px-2">پایه ششم</span>
          </div>
        </div>
        {/* divider */}
        <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
        {/* course title */}
        {chapters.map((chapter, index) => (
          <div className="flex flex-col">
            <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
              <p className="text-sm text-white">{chapter.title}</p>
              <span className="text-sm text-white">{chapter.duration}</span>
            </div>
            {chapter.lessons.map((lesson, index) => (
              <div className="flex flex-row items-center justify-around mt-3">
                {/* right div dot dot */}
                <div className="bg-yellow-100" style={{ width: "10%" }}>
                  mahdi
                </div>
                {/* left div content  */}
                <div style={{ width: "80%" }}>
                  {/* top */}
                  <div className="bg-white border border-blue-600 p-2 flex flex-col rounded-tr-md rounded-tl-md">
                    <div className="flex flex-row items-center justify-between">
                      <p className="text-sm text-blue-500">{lesson.title}</p>
                      <span className="text-xs text-blue-500">
                        {lesson.duration}
                      </span>
                    </div>
                  </div>
                  {/* bottom */}
                  <div className="bg-white border border-blue-600 p-2 flex flex-col rounded-br-md rounded-bl-md">
                    <span className="text-xs text-center text-blue-500">
                      {lesson.play}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </section>
  );
};

export default CourseChapter;

CourseChapter.defaultProps = {
  chapters: [
    {
      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
      duration: "2:30:13",
      lessons: [
        { title: "آیا گوگل از ما دزدی میکند؟", duration: "14:30", play: "پخش" },
      ],
    },
  ],
};