import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import useSections  from '../hooks/useSections';
import { slugify } from '../../../../utils/Constant';

import Skeleton from 'react-loading-skeleton';

const Learning = () => {
    const { sections, loading, error, thumbPath} = useSections();

    if (error) {
        return <div>Error: {error.message}</div>;
    }

    return (
        <div className='learning-page'>
            <div className="d-flex justify-content-between align-items-start">
                <div>
                    <h3 className='text-blue fw-bold mb-1'>Choose what you want to learn!</h3>
                    <p className='text-secondary'>Develop your <span className='text-warning'>English</span> skills by studying the topics in each section below.</p>
                </div>
            </div>

            {loading ? (
                <div className='w-100 d-flex justify-content-between'>
                    <Skeleton containerClassName="w-100 mb-2" className='mb-2 rounded-4' count={2} style={{width:"98%", height:"30vh"}} />
                    <Skeleton containerClassName="w-100 mb-2" className='mb-2 rounded-4' count={2} style={{width:"98%", height:"30vh"}} />
                </div>
            ) : (
                <Row xs={1} md={2} xxl={4}>
                    {Array.isArray(sections) && sections.map(section => (
                        <Col key={section.ID_SECTION} className='mb-4'>
                            <Card className='h-100 shadow shadow-sm rounded-4 border-0'>
                                <Card.Body>
                                    <Card.Img variant="top" src={`${thumbPath}${section.THUMBNAIL}`} alt={section.NAME_SECTION} />
                                    <Card.Title className='text-capitalize'>{section.NAME_SECTION}</Card.Title>
                                    <Card.Text className='text-muted'>
                                        {section.DESCRIPTION_SECTION}
                                    </Card.Text>
                                    <Button as={Link} to={slugify(section.NAME_SECTION)} variant='warning' className='py-2 w-100 rounded-35'>
                                        Learn
                                    </Button>
                                </Card.Body>
                            </Card>
                        </Col>
                    ))}
                </Row>
            )}
        </div>
    );
};

export default Learning;
