import { CalendarCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Scooter } from "@/lib/mock-data";

type ScooterCTAProps = {
  scooter: Scooter;
};

export function ScooterCTA({ scooter }: ScooterCTAProps) {
  return (
    <section className="bg-white pb-10 pt-6">
      <div className="container-custom">
        <div className="rounded-[1.5rem] bg-primary p-6 text-white shadow-soft md:p-8">
          <div className="flex flex-col items-start justify-between gap-5 md:flex-row md:items-center">
            <div className="flex items-center gap-4">
              <span className="inline-flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-white text-primary">
                <CalendarCheck className="h-8 w-8" />
              </span>
              <div>
                <h2 className="text-2xl font-bold">Ready to Ride the Future?</h2>
                <p className="mt-1 text-sm leading-6 text-blue-50">
                  Book a test ride today and experience {scooter.name} in real life.
                </p>
              </div>
            </div>
            <Button href="/book-test-ride" variant="secondary">
              Book a Test Ride
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}