import React from 'react'
import { Box, Typography, IconButton } from '@mui/material'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
import { useSelector } from 'react-redux'
import { toggleShowAll } from '@/redux/slices/courseDetailsSlice'
import { RootState } from '@/redux/store'

import './ExploreCoursesDetails.css'
import { useAppDispatch } from '@/redux/hooks'
import { courseaboutDetails } from './exploreCourseStaticData'

const ExploreDetailsAboutCourse: React.FC = () => {
  const dispatch = useAppDispatch()
  const showAll = useSelector((state: RootState) => state.courseDetails.showAll)

  const toggleView = () => {
    dispatch(toggleShowAll())
  }
  return (
    <Box className="fr_about_course">
      <Typography variant="h5">About the course</Typography>
      {/* First Paragraph */}
      <Typography className='fr_course_about_text' variant="body1">{courseaboutDetails.para1}</Typography>

      {/* Second Paragraph */}
      <Typography className='fr_course_about_text' variant="body1">{courseaboutDetails.para2}</Typography>

      {/* Show more content */}
      {showAll && (
        <Box>
          <Typography className='fr_course_about_text' variant="body1">{courseaboutDetails.para3}</Typography>
          <Typography className='fr_course_about_text' variant="body1">{courseaboutDetails.para4}</Typography>
          <Typography className='fr_course_about_text' variant="body1">{courseaboutDetails.para5}</Typography>
        </Box>
      )}

      {/* Toggle Button */}
      <div className="toggle-button" onClick={toggleView}>
        <Typography className="fr_about_toggle_btn">
          {showAll ? 'Show less' : 'Show more'}
        </Typography>
        <IconButton className="chevron-icon">
          {showAll ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </IconButton>
      </div>
    </Box>
  )
}

export default ExploreDetailsAboutCourse