import type { PublicActivity } from '@frontend/components/sections/ServiceGrid';
import { Link } from '@inertiajs/react';

export function HomeServices({ services }: { services: PublicActivity[] }) {
    return (
        <>
                <section className="services-section-2"> 
                    {/* services shape top start */}
                    <div className="services-shape-top">
                        <figure>
                            <img src="/assets/images/shape/shape-two-color-top.png" alt="services shape two bottom" />
                        </figure>
                    </div>
                    {/* services shape top end */}
                    {/* services wapper start */}
                    <div className="services-wapper pt-100 md-pt-80 pb-70 md-pb-50">
                        <div className="services-shape-2">
                            <figure>
                                <img src="/assets/images/services/service-shape-2.png" alt="service shape two" />
                            </figure>
                        </div>
                        <div className="container">
                            <div className="row justify-content-between">
                                <div className="col-lg-4">
                                    <div className="services-left-content sticky">
                                        {/* section title start */}
                                        <div className="section-title mb-30">
                                            <span className="sub-title">Our Services</span>
                                            <h2>We provide services for you</h2>
                                            <p>At our hotel luxury is more than just a word it's a tradition. From exquisite design to personalized service, every detail is thoughtfully curated to create unforgettable experiences.</p>
                                        </div>
                                        {/* section title end */}
                                        {/* service button wappper start */}
                                        <div className="service-button-wappper">
                                            <Link href="/service" className="theme-button style-1" aria-label="View All Services">
                                                View All Services
                                            </Link>
                                        </div>
                                        {/* service button wappper end */}
                                    </div>
                                </div> 
                                <div className="col-lg-7"> 
                                    {services.map((service) => (
                                    <div className="services-item" key={service.slug}>
                                        <div className="services-image">
                                            <Link href={service.href}>
                                                <figure className="image-anime">
                                                    <img src={service.image} alt={service.name} />
                                                </figure>
                                            </Link>
                                        </div>
                                        <div className="services-content">
                                            <div className="services-content-text">
                                                <h3 className="services-title line-anime"><Link href={service.href}>{service.name}</Link></h3>
                                                {service.summary !== '' && <p>{service.summary}</p>}
                                            </div>
                                            <div className="services-button-wapper">
                                                <Link href={service.href} className="theme-button style-1" aria-label="View">
                                                    View
                                                </Link>
                                            </div>
                                        </div>
                                    </div>
                                    ))} 
                                </div> 
                            </div> 
                        </div>
                    </div>
                    {/* services wapper end */}
                    {/* services shape bottom start */}
                    <div className="services-shape-bottom">
                        <figure>
                            <img src="/assets/images/shape/shape-two-color-bottom.png" alt="services shape two color bottom" />
                        </figure>
                    </div>
                    {/* services shape bottom end */}                     
                </section>
        </>
    );
}