import React, { useEffect, useState } from 'react'
import { Box, Typography } from '@mui/material'

import './ExploreCoursesDetails.css'
import { applyStyles } from '@/utils/globalStyles'

const ExploreDetailsWhoCanTake: React.FC = () => {
  applyStyles()
  const chaptersList = [
    'A beginner’s guide to the stock market, this course can help you learn the basics.',
    'Investors with some experience in the stock market who would like to improve their knowledge and skills.',
    'Individuals seeking long-term financial growth who want to grow their money over time should consider investing in the stock market.',
    'People who want to understand the stock market better.',
    'Helpful for students and professionals in finance and economics.',
  ]
  useEffect(() => {
    applyStyles()
  }, [dispatch])
  return (
    <Box
      id="course-info-container"
      sx={{
        display: 'flex',
        flexDirection: { xs: 'column', md: 'row' },
        alignItems: 'center',
        gap: 4,
        padding: 2,
      }}
    >
      {/* Text Section */}
      <Box
        sx={{
          flex: 1,
          textAlign: { xs: 'center', md: 'left' },
        }}
      >
        <Typography className="title" variant="h4" sx={{ marginBottom: 2 }}>
          Who can take up this course?
        </Typography>
        <ul className="point-list">
          {chaptersList.map((chapters, index) => (
            <li
              className={`point-color`}
              key={index}
              style={{
                marginBottom: '0.5rem',
                color: '#555',
                fontSize: '1rem',
              }}
            >
              {chapters}
            </li>
          ))}
        </ul>
      </Box>

      {/* Image Section */}
      <Box
        sx={{
          flex: 1,
          textAlign: 'center',
        }}
      >
        <img
          src="../images/people.svg" // Replace with correct path
          alt="Course Illustration"
          style={{
            maxWidth: '100%',
            height: 'auto',
            borderRadius: '8px',
          }}
        />
      </Box>
    </Box>
  )
}

export default ExploreDetailsWhoCanTake
function dispatch() {
  throw new Error('Function not implemented.')
}