import React from 'react';
import { useTranslation } from 'react-i18next';
import { Container, Row, Col } from 'react-bootstrap';

import tuitionImage from '../assets/services/tuition.jpg';
import monthlyPaymentImage from '../assets/services/monthly.jpg';
import cafeteriaImage from '../assets/services/cafeteria.jpg';
import extendedHoursImage from '../assets/services/extended.jpg';
import workshopImage from '../assets/services/workshop.jpg';
import parentSchoolImage from '../assets/services/parents.jpg';
import summerSchoolImage from '../assets/services/summer.jpg';

const Services: React.FC = () => {
    const { t } = useTranslation();
   
    // { title: "...", tuition: { ... }, monthlyPayment: { ... }, ... }
    const services = t('services', { returnObjects: true }) as any; 

    const serviceImages: { [key: string]: string } = {
        tuition: tuitionImage,
        monthlyPayment: monthlyPaymentImage,
        cafeteria: cafeteriaImage,
        extendedHours: extendedHoursImage,
        workshop: workshopImage,
        parentSchool: parentSchoolImage,
        summerSchool: summerSchoolImage
    };

    return (
        <section id="services" className="section-padding bg-light">
            <Container>
                <Row className="mt-5">
                    <Col>
                        <h2 className="text-center mb-5">{services.title}</h2>
                    </Col>
                </Row>

                {Object.entries(services).map(([key, serviceData], index) => {
                    // Skip the title entry
                    if (key === 'title') return null;

                    const isOdd = index % 2 !== 0;

                    // Define the common JSX for each column
                    const imageCol = (
                        <Col key={`${key}-image`} md={3} className="mb-3 mb-md-0">
                            <img
                                src={serviceImages[key]} // Use key directly to get image path
                                alt={(serviceData as any).title}
                                className="img-fluid rounded shadow-sm"
                            />
                        </Col>
                    );

                    const textCol = (
                        <Col key={`${key}-text`} md={6} className="mb-3 mb-md-0">
                            {/* Cast serviceData to any to access properties */}
                            <h3 className="h4">{(serviceData as any).title}</h3>
                            <p>{(serviceData as any).description}</p>
                            {(serviceData as any).description2 && <p>{(serviceData as any).description2}</p>}

                            {/* Render activities if they exist */}
                            {(serviceData as any).activities && (
                                <ul className="mt-2">
                                    {(serviceData as any).activities.map((activity: string, idx: number) => (
                                        <li key={idx}>{activity}</li>
                                    ))}
                                </ul>
                            )}

                            {/* Render topics if they exist (for parent school) */}
                            {(serviceData as any).topics && (
                                <ul className="mt-2">
                                    {(serviceData as any).topics.map((topic: string, idx: number) => (
                                        <li key={idx}>{topic}</li>
                                    ))}
                                </ul>
                            )}
                        </Col>
                    );

                    const priceCol = (
                        <Col key={`${key}-price`} md={3} className={`mb-3 mb-md-0 ${isOdd ? 'text-md-left' : 'text-md-right'}`}>
                             {/* Use d-inline-block to keep the price block contained */}
                            <div className="bg-light p-3 rounded d-inline-block">
                                <h4 className="h5 text-primary mb-0">{(serviceData as any).price}</h4>
                                {(serviceData as any).price2 && (
                                    <h4 className="h5 text-primary mb-0 mt-2">{(serviceData as any).price2}</h4>
                                )}
                            </div>
                        </Col>
                    );

                    return (
                        <Row key={key} className="mb-5 align-items-center">
                            {/* Conditionally render the columns based on index parity */}
                            {isOdd ? (
                                // Odd index: Price Left, Text Middle, Image Right
                                <>
                                    {priceCol}
                                    {textCol}
                                    {imageCol}
                                </>
                            ) : (
                                // Even index: Image Left, Text Middle, Price Right (default)
                                <>
                                    {imageCol}
                                    {textCol}
                                    {priceCol}
                                </>
                            )}
                        </Row>
                    );
                })}
            </Container>
        </section>
    );
};

export default Services;

I'm trying to give a diferent background color to the even index of my loop, but I don't know where to put the class to do so, help me do it please