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 HighDemand({ routes }: Props) {
    const { ref, prev, next } = useHorizontalScroll<HTMLDivElement>();

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

    return (
        <section className="relative overflow-hidden pt-16 pb-10 lg:pt-24">
            <div className="absolute inset-x-0 bottom-0 h-[55%]">
                <img
                    src="/images/high-demand-bg.jpg"
                    alt=""
                    className="size-full object-cover object-[center_45%]"
                />
                <div className="absolute inset-0 bg-gradient-to-b from-mist via-mist/40 to-transparent dark:from-navy dark:via-navy/40" />
            </div>

            <div className="relative mx-auto max-w-5xl px-4 sm:px-6">
                <h2 className="text-center font-google text-3xl font-semibold text-navy sm:text-4xl dark:text-white">
                    High Demand Connections
                </h2>

                <div
                    ref={ref}
                    className="mt-12 flex snap-x snap-mandatory [scrollbar-width:none] gap-5 overflow-x-auto pb-6"
                >
                    {routes.map((route) => (
                        <div
                            key={route.id}
                            className="w-[78%] shrink-0 snap-start sm:w-[calc((100%-2.5rem)/3)]"
                        >
                            <RouteCard route={route} />
                        </div>
                    ))}
                </div>

                <CarouselControls
                    onPrev={prev}
                    onNext={next}
                    variant="solid"
                    className="mt-6 justify-center"
                />
            </div>
        </section>
    );
}