import { useHorizontalScroll } from '@/hooks/use-horizontal-scroll';
import CarouselControls from './carousel-controls';
import type { TransferRoute } from '@/types/booking';
import RouteCard from './route-card';

type Props = {
    routes: TransferRoute[];
};

export default function PopularRoutes({ routes }: Props) {
    const { ref, prev, next } = useHorizontalScroll<HTMLDivElement>();

    if (routes.length === 0) {
        return null;
    }

    return (
        <section id="routes" className="py-12 lg:py-16">
            <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 sm:px-6 lg:flex-row lg:items-end lg:justify-between lg:px-10">
                <h2 className="max-w-md font-google text-3xl leading-tight font-semibold text-navy sm:text-4xl dark:text-white">
                    Most popular private transfer routes
                </h2>
                <p className="max-w-sm text-sm text-gray-500 dark:text-white/80">
                    Bespoke ground mobility designed for executive roadshows,
                    seamless airport arrival, and weekend retreats.
                </p>
            </div>

            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:pl-10 lg:pr-0">
                <div
                    ref={ref}
                    className="mt-10 flex snap-x snap-mandatory [scrollbar-width:none] gap-5 overflow-x-auto px-0 pb-6"
                >
                    {routes.map((route) => (
                        <div
                            key={route.id}
                            className="w-[78%] shrink-0 snap-start sm:w-[45%] lg:w-[23.5%]"
                        >
                            <RouteCard route={route} />
                        </div>
                    ))}
                </div>
            </div>

            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-10">
                <CarouselControls
                    onPrev={prev}
                    onNext={next}
                    className="mt-6"
                />
            </div>
        </section>
    );
}