import { PageBreadcrumb } from '@frontend/components/layout/PageBreadcrumb';
import { Link } from '@inertiajs/react';

export type PublicActivity = {
    name: string;
    slug: string;
    summary: string;
    image: string;
    icon: string;
    href: string;
};

type ServiceGridProps = {
    services: PublicActivity[];
};

export function ServiceGrid({ services }: ServiceGridProps) {
    return (
        <>
            <PageBreadcrumb page="service" />

            {services.length > 0 && (
                <section className="services-section-1 pt-100 md-pt-80 pb-100 md-pb-80">
                    <div className="container">
                        <div className="row">
                            {services.map((service, index) => (
                                <div className="col-xl-4 col-lg-6 col-md-6" key={service.slug}>
                                    <div className="services-item wow fadeInUp" data-wow-delay={`.${Math.min(index + 3, 8)}s`}>
                                        <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-icon-box">
                                                <div className="services-icon">
                                                    <figure>
                                                        <img src={service.icon} alt="" />
                                                    </figure>
                                                </div>
                                                <div className="services-icon-content">
                                                    <h2 className="services-title line-anime">
                                                        <Link href={service.href}>{service.name}</Link>
                                                    </h2>
                                                </div>
                                            </div>
                                            {service.summary !== '' && <p>{service.summary}</p>}
                                            <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>
                </section>
            )}
        </>
    );
}