import { Link, usePage } from '@inertiajs/react';
import { ClientCard } from '@frontend/components/sections/ClientCard';
import { clientsPageHero } from '@frontend/content/clients-page';
import { breadcrumbBackgroundUrl } from '@frontend/lib/marketing-backgrounds';
import { marketingRoute } from '@frontend/lib/marketing-route';
import type { ClientsPageProps } from '@frontend/types/pages/clients';
import type { SharedData } from '@/types';

const clientDelays = ['100ms', '200ms', '300ms', '400ms', '100ms', '200ms', '300ms', '400ms'] as const;

export function ClientsMain({ clients }: ClientsPageProps) {
    const { marketingBackgrounds } = usePage<SharedData>().props;

    return (
        <>
            <section
                className="page-title-section top-position1 bg-img cover-background secondary-overlay"
                data-overlay-dark="8"
                data-background={breadcrumbBackgroundUrl(marketingBackgrounds)}
            >
                <div className="container">
                    <div className="row">
                        <div className="col-md-12 text-center">
                            <h1>{clientsPageHero.heading}</h1>
                            <ul>
                                <li>
                                    <Link href={marketingRoute('home')}>Home</Link>
                                </li>
                                <li>{clientsPageHero.breadcrumbCurrent}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section className="bg-linear-gradient">
                <div className="container position-relative z-index-9">
                    <div className="row align-items-center justify-content-center mt-n2-9">
                        {clients.map((client, index) => (
                            <div
                                key={client.id}
                                className="col-md-6 col-lg-3 mt-2-9 wow fadeInUp"
                                data-wow-delay={clientDelays[index % clientDelays.length]}
                            >
                                <ClientCard {...client} headingTag="h2" />
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </>
    );
}