import React from 'react'
import {
  Box,
  Typography,
  Button,
  IconButton
} from '@mui/material'
import CloseIcon from '@mui/icons-material/Close';
import './ExploreCoursesDetails.css'
import { Access } from '@/utils/constant';

interface CategoryBenefitsProps {
    onClose: () => void; // Callback to close the modal
  }
  

const ExploreCourseCategoryBenefits: React.FC<CategoryBenefitsProps> = ({onClose}) => {
  
  return (
    <Box  flex={{ xs: '1', md: '0.5' }} id="category-benefits-container">
    {/* Header */}
    <Box className="category-benefits-header">
     
    <IconButton onClick={onClose} className="close-icon">
        <CloseIcon />
      </IconButton> <Typography variant="h6" className="category-benefits-title">
        Category Benefits
      </Typography>
      
    </Box>

    {/* Content */}
    <Box className="category-benefits-content">
      <Box className="benefit-item">
        <Typography className='benafits-icon-bg'><img src="./icons/career.svg" alt="Career Building" /></Typography>
        <Typography className='benafits-text'>Access to <strong>Career Building Courses</strong></Typography>
      </Box>
      <Box className="benefit-item">
      <Typography className='benafits-icon-bg'><img src="/icons/finance.svg" alt="Personal Finance" /></Typography>
        <Typography className='benafits-text'>Access to 10+ courses in <strong>Personal Finance</strong></Typography>
      </Box>
      <Box className="benefit-item">
      <Typography className='benafits-icon-bg'><img src="/icons/offline.svg" alt="Offline Mode" /></Typography>
        <Typography className='benafits-text'>Learn in <strong>offline mode</strong></Typography>
      </Box>
      <Box className="benefit-item">
      <Typography className='benafits-icon-bg'><img src="/icons/certificate.svg" alt="Certificate" /></Typography>
        <Typography className='benafits-text'><strong>Certificate</strong> on completion</Typography>
      </Box>
      <Box className="benefit-item">
      <Typography className='benafits-icon-bg'><img src="/icons/chatbot.svg" alt="Chatbot Access" /></Typography>
        <Typography className='benafits-text'>Unlimited <strong>AI-powered chatbot</strong> access</Typography>
      </Box>
      
    </Box>
    <Box className="benefit-item-footer">
      <Typography className='benafits-only-available'>*Only available in mobile app.</Typography>
        <Typography className='benafits-monthly-base'>Just at ₹399/month (cancel anytime)</Typography>
      </Box>

    {/* Footer */}
    <Box className="category-benefits-footer">
      <Button variant="contained" fullWidth className="buy-now-btn">
        By Now
      </Button>
    </Box>
  </Box>
  )
}

export default ExploreCourseCategoryBenefits