//forms page
'use client';
import React from 'react';
import '../../styles/forms.scss';
import MainLayout from '../../components/MainLayout';
import { Card, Container, Row, Col } from 'react-bootstrap';
import formData from '../../components/json/formsData.json'; // Import the JSON data

interface FormData {
  title: string;
  text: string;
  formLink: string;
}

const FormCard: React.FC<FormData> = ({ title, text, formLink }) => {
  return (
    <Col xs={12} md={4}>
      <Card className="form-card">
        <Card.Body>
          <Card.Title as="h5" className="form-title">
            {title}
          </Card.Title>
          <Card.Text className="form-text">{text}</Card.Text>
          <Card.Link href={formLink} target="_blank" className="form-link">
            Click for Form
          </Card.Link>
        </Card.Body>
      </Card>
    </Col>
  );
};

const Admissions = () => {
  return (
    <MainLayout>
      <Container>
        <Card>
          <Card.Header className='formHeader'>Forms</Card.Header>
          <Card.Body>
            <Row>
              {/* Map over the form data and render the FormCard components */}
              {formData.map((form: FormData) => (
                <FormCard key={form.title} {...form} />
              ))}
            </Row>
          </Card.Body>
        </Card>
      </Container>
    </MainLayout>
  );
};

export default Admissions;