'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) => (
                            <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={item.title} />
                                                </Link>
                                            </figure>
                                        </div>
                                        <div className="lower-content">
                                            <div className="icon-box">
                                                <img
                                                    src={item.icon}
                                                    alt={`${item.title} Icon`}
                                                />
                                            </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>
    )
}