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

import './ExploreCoursesDetails.css'

const ExploreDetailsWhatLearn: React.FC = () => {
  const [showAll, setShowAll] = useState(false)

  const points = [
    '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.',
  ]

  const toggleView = () => setShowAll(!showAll)

  return (
    <Box
      id="fr-course-learn-container"
      display="flex"
      flexDirection={{ xs: 'column', md: 'row' }}
      alignItems="center"
      gap={4}
      padding={2}
    >
      {/* Image Section */}
      <Box flex={{ xs: '1', md: '0.5' }} display="flex" justifyContent="center">
        <img
          src="../images/self-paced-learning.svg"
          alt="Course Illustration"
          style={{
            width: '100%',
            maxWidth: '400px',
            borderRadius: '8px',
          }}
        />
      </Box>

      {/* Text Section */}
      <Box
        flex={{ xs: '1', md: '0.5' }}
        textAlign={{ xs: 'center', md: 'left' }}
      >
        <Typography className="fr_learn_title" variant="h4" gutterBottom>
          What will you learn from the course?
        </Typography>
        <ul>
          {points.map((point, index) => (
            <li key={index} className="point-item">
              <Typography variant="body1">{point}</Typography>
            </li>
          ))}
        </ul>
      </Box>
    </Box>
  )
}

export default ExploreDetailsWhatLearn