bs-p2/app/components/PracticalCourses.tsx

type PracticalData = {
  id: number;
  module: number;
  status: number;
  time: number;
  access: number;
  title: string;
  description: string;
  img: string;
  total_marks: string;
};

let practicalData: PracticalData[] = [
  {
    id: 1,
    module: 1,
    status: 2,
    time: 20,
    access: 1,
    title: "Life History of Dr. Maria Montessori",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/assets/pimage1.jpg",
    total_marks: "50"
  },
  {
    id: 2,
    module: 2,
    status: 1,
    time: 20,
    access: 1,
    title: "Introduction to Montessori Methods",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/assets/pimage2.jpg",
    total_marks: "50"
  },
  {
    id: 3,
    module: 3,
    status: 0,
    time: 20,
    access: 0,
    title: "Exercises in Practical Life",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/assets/pimage3.jpg",
    total_marks: "50"
  },
  {
    id: 1,
    module: 1,
    status: 0,
    time: 20,
    access: 0,
    title: "Life History of Dr. Maria Montessori",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/assets/pimage1.jpg",
    total_marks: "50"
  },
  {
    id: 2,
    module: 2,
    status: 0,
    time: 20,
    access: 0,
    title: "Introduction to Montessori Methods",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/assets/pimage2.jpg",
    total_marks: "50"
  },
  {
    id: 3,
    module: 3,
    status: 0,
    time: 20,
    access: 0,
    title: "Exercises in Practical Life",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/assets/pimage3.jpg",
    total_marks: "50"
  }
];

export default function CourseTheory() {
  const getStatusText = (status: number): string => {
      if (status === 2) return "<p style='color: #218B32; font-weight: 600; font-size: 18px; display: inline-flex;'><img style='margin-right: 8px;' src='/assets/green-tick.svg' />Finished</p>";
      if (status === 1) return "<p style='color: #EF7A0C; font-weight: 600; font-size: 18px' >40% Completed</p>";
      if (status === 0) return " ";
      return "";
  }

  return(
      <div>
          <section className="container mx-auto p-4 px-10">
              <div className="flex flex-row justify-between place-items-center rounded-[10px] bg-[#FBFBFB] border-[1px] border-[#D1D1D1]">
                  <div className="flex flex-row h-[107px] place-items-center p-4 space-x-6">
                      <div className="relative inline-block">
                          <img className="h-[81px] w-[137px] rounded-[10px]" src="/assets/pimage3.jpg" alt="" />
                          <button className="absolute inset-0 m-auto h-10 w-10">
                              <img  src="/assets/play.svg" alt="" />
                          </button>
                      </div>
                      <div className="">
                          <h2 className="tet-[18px] font-[700] text-[#000] w-[328px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
                          <p className="text-[14px] font-[600] text-[#EF7A0C]">
                              <span> Video</span> &nbsp;|&nbsp; 
                              <span> 30 mins</span>
                          </p>
                      </div>
                  </div>
                  <div className="pr-4">
                      <button className="bg-[#000] text-[#FFF] font-[600] px-6 py-2 text-[18px] rounded-[8px]">Continue Learning</button>
                  </div>
              </div>
          </section>
          <section className="container mx-auto px-4">
              <div className="grid grid-cols-1  lg:grid-cols-2 p-6 gap-10 ">
                  {
                      practicalData.map((data, index) => (
                          <div key={index} className={`border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
                              <img className="w-full rounded-[8px]" src={data.img} alt="" />
                              <h2 className="text-[18px] font-[700]">{data.title}</h2>
                              <p className="text-[14px] font-[700] text-[#EF7A0C] py-2"><span>{data.time} mins of Practical</span> </p>
                              {/* <p className="text-[14px] font-[500] text-[#6E6E6E] pb-6">{data.description}</p> */}
                              <div className="flex flex-row justify-between place-items-center">
                                <button disabled={data.access === 0} className={`text-[18px] font-[600] bg-[#000] rounded-[8px] px-[50px] py-2 text-[#fff] ${data.access == 0 ? 'cursor-not-allowed' : ''}`}>{data.access === 0 ? 'Locked' : 'View'}</button>
                                {/* <div dangerouslySetInnerHTML={{ __html: getStatusText(data.status) }} /> */}
                              </div>
                          </div>
                      ))
                  }
              </div>
          </section>
      </div>
  )
}