import React from "react";

interface ProgrammeProps {
  Period: string[];
  Sunday: any;
  Monday: any;
  Tuesday: any;
  Wednesday: any;
  Thursday: any;
  Friday: any;
  Saturday: any;
  renderDayOrPlaceHolder: (day: any) => JSX.Element;
}

const Programme: React.FC<ProgrammeProps> = ({
  Period,
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  renderDayOrPlaceHolder,
}) => {
  return (
    <div id="pdfContent" className="programme p-2">
      <div className="Periods">
        {Period.map((day, index) => (
          <span className="Period block" key={index}>
            {day}
          </span>
        ))}
      </div>

      <div className="programme_table">
        <div className="Single_Day Saturday_Day">
          {renderDayOrPlaceHolder(Saturday)}
        </div>

        <div className="Single_Day Sunday_Day">
          {renderDayOrPlaceHolder(Sunday)}
        </div>
        <div className="Single_Day Monday_Day">
          {renderDayOrPlaceHolder(Monday)}
        </div>
        <div className="Single_Day Tuesday_Day">
          {renderDayOrPlaceHolder(Tuesday)}
        </div>
        <div className="Single_Day Wednesday_Day">
          {renderDayOrPlaceHolder(Wednesday)}
        </div>
        <div className="Single_Day Thursday_Day">
          {renderDayOrPlaceHolder(Thursday)}
        </div>
        <div className="Single_Day Friday_Day">
          {renderDayOrPlaceHolder(Friday)}
        </div>
      </div>
    </div>
  );
};

export default Programme;
