// AboutUs
'use client';
import React from 'react';
import MainLayout from '../components/MainLayout';
import { Container, Card, Image } from 'react-bootstrap';
import Link from 'next/link'; // Import the Link component
import aboutUsContent from '../components/json/aboutUsContent.json';
import '../styles/about-us.scss';

interface SectionData {
  title: string;
  content: string;
  placeholderImage: {
    src: string;
    alt: string;
  };
  link?: string;
  subItems?: string[];
  learnMore?: string;
}

const AboutUsPage: React.FC = () => {
  const sections: SectionData[] = aboutUsContent.sections;

  return (
    <MainLayout>
      <Container>
        <Card className="about-card">
          <Card.Header className="about-header">About Us</Card.Header>
          <div className="about-us-container">
            <Card.Body>
              <Card.Text>{aboutUsContent.introductory_paragraph}</Card.Text>
            </Card.Body>
            {sections &&
              sections.map((section, index) => {
                return (
                  <Card.Body key={index}>
                    <Image
                      className="aboutUsImage"
                      src={section.placeholderImage.src}
                      alt={section.placeholderImage.alt}
                    />
                    <Card.Title>{section.title}</Card.Title>
                    <Card.Text>{section.content}</Card.Text>
                    {section.learnMore && (
                      <Card.Text>
                        {section.content.includes('→ Learn more about St. Michael’s Episcopal Church.') ? (
                          <a
                            href={section.learnMore}
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            → Learn more about St. Michael’s Episcopal Church.
                          </a>
                        ) : (
                          <Link href={section.learnMore}>
                          Learn more
                          </Link>
                        )}
                      </Card.Text>
                    )}
                  </Card.Body>
                );
              })}
          </div>
        </Card>
      </Container>
    </MainLayout>
  );
};

export default AboutUsPage;