'use client';
import Layout from "@/components/layout/Layout"
import Link from "next/link"
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils"

export default function AreaOfInjury() {
    return (
        <Layout
            headerStyle={2}
            footerStyle={1}
            breadcrumbTitle="Areas of Injury"
            bannerImage="/assets/images/areas-of-injury/area-of-injury-banner.webp"
        >
            <section className="service-section sec-pad-2">
                <div className="auto-container">
                    <div className="row clearfix">
                        {areaOfInjuryData.map((item) => {
                            // Always use TITLE in uppercase
                            const altText = item.title ? item.title.toUpperCase() : "AREA OF INJURY";

                            return (
                                <div className="col-lg-4 col-md-6 col-sm-12 service-block" key={item.id}>
                                    <div
                                        className="service-block-one wow fadeInUp animated"
                                        data-wow-delay="00ms"
                                        data-wow-duration="1500ms"
                                    >
                                        <div className="inner-box">
                                            <div className="image-box">
                                                <figure className="image">
                                                    <Link href={`/area-of-injury/${item.slug}`}>
                                                        <img src={item.image} alt={altText} />
                                                    </Link>
                                                </figure>
                                            </div>
                                            <div className="lower-content">
                                                <div className="icon-box">
                                                    <img src={item.icon} alt={altText} />
                                                </div>
                                                <h3>
                                                    <Link href={`/area-of-injury/${item.slug}`}>{item.title}</Link>
                                                </h3>
                                                <p>{item.shortDescription}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </section>
        </Layout>
    )
}