import { Link } from '@inertiajs/react';
import type { TransferRoute } from '@/types/booking';

export default function RouteCard({
    route,
}: {
    route: TransferRoute;
}) {
    return (
        <Link
            href={`/routes/${route.slug}`}
            className="group block overflow-hidden rounded-xl bg-white shadow-[0_8px_30px_-12px_rgba(11,31,51,0.18)] ring-white focus-visible:ring-2 focus-visible:ring-gold dark:ring-3"
        >
            <div className="aspect-[16/11] overflow-hidden">
                <img
                    src={route.image ?? '/images/hero-bg.png'}
                    alt={`${route.origin} to ${route.destination}`}
                    loading="lazy"
                    className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
                />
            </div>
            <div className="px-5 py-4">
                <h3 className="text-sm font-medium text-navy">
                    {route.origin} to {route.destination}
                </h3>
                <p className="mt-1 text-xs text-gray-500">
                    {route.duration} · {route.distance}
                </p>
                <span className="mt-2 inline-block text-xs text-gold-dark underline underline-offset-2 group-hover:text-navy">
                    From {route.price}
                </span>
            </div>
        </Link>
    );
}