//Educators Page
// Import required components and types
'use client';
import React, { useState } from "react";
import { Container, Card, Image } from "react-bootstrap";
import MainLayout from "../../components/MainLayout"; // Make sure to import MainLayout
import "../../styles/educators.scss"; // Make sure to import your stylesheet
import educatorData from "../../components/json/educatorsPage.json";

const EducatorsPage = () => {
  const [expandedIndex, setExpandedIndex] = useState<number>(-1);

  const toggleExperience = (index: number) => {
    if (expandedIndex === index) {
      setExpandedIndex(-1);
    } else {
      setExpandedIndex(index);
    }
  };

  return (
    <MainLayout>
      <Container>
      <Card>
      <Card.Header style={{ fontSize: '2.2rem', fontWeight: 'bold', marginBottom: '30px', textAlign: 'center' }}>
        Meet Our Educators
      </Card.Header> {/* inline styling due to Nested Selector/Specificity issue*/}
        <div className="educators-container">
          <div className="educators-list">
            {educatorData.map((educator: any, index: number) => (
              <div className="educator-card" key={index}>
                <Image src={educator.imageSrc}  alt={educator.alt} className="image" thumbnail fluid/>
                <Card.Body>
                  <Card.Title className="card-title">{educator.name}</Card.Title>
                  <Card.Text className="role">{educator.role}</Card.Text>
                  <Card.Text className="card-text">
                    {expandedIndex === index || educator.experience.length < 150
                      ? educator.experience
                      : educator.experience.slice(0, 150) + "..."}
                    {educator.experience.length > 150 && (
                      <span
                        className="read-more"
                        onClick={() => toggleExperience(index)}
                      >
                        {expandedIndex === index ? " (Read Less)" : " (Read More)"}
                      </span>
                    )}
                  </Card.Text>
                </Card.Body>
              </div>
            ))}
          </div>
        </div>
      </Card>
      </Container>
    </MainLayout>
  );
};

export default EducatorsPage;