import { Check, Scale } from "lucide-react";
import { Button } from "@/components/ui/button";
import { scooters as mockScooters, type Scooter } from "@/lib/mock-data";

type CompareBannerProps = {
  scooters?: Scooter[];
};

export function CompareBanner({ scooters = mockScooters }: CompareBannerProps) {
  const firstScooter = scooters[0];
  const secondScooter = scooters[2] ?? scooters[1] ?? scooters[0];

  return (
    <section className="bg-white py-5">
      <div className="container-custom">
        <div className="grid items-center gap-6 overflow-hidden rounded-xl border border-border bg-primary-soft/50 p-6 shadow-card md:grid-cols-[0.8fr_1.2fr_auto]">
          <div className="flex items-center justify-center gap-3">
            {firstScooter ? (
              <img
                src={firstScooter.thumbnailImage}
                alt={firstScooter.name}
                className="h-28 w-32 rounded-xl object-contain"
              />
            ) : null}
            <span className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-ev text-sm font-black text-white">
              VS
            </span>
            {secondScooter ? (
              <img
                src={secondScooter.thumbnailImage}
                alt={secondScooter.name}
                className="h-28 w-32 rounded-xl object-contain"
              />
            ) : null}
          </div>
          <div>
            <div className="flex items-center gap-3">
              <Scale className="h-6 w-6 text-primary" />
              <h2 className="text-2xl font-bold text-navy-deep">
                Not sure which scooter is right for you?
              </h2>
            </div>
            <p className="mt-2 text-sm leading-6 text-navy-muted">
              Compare top models side by side and choose the perfect match for
              your daily ride.
            </p>
            <div className="mt-4 grid gap-2 text-sm text-navy-muted sm:grid-cols-3">
              {["Compare range, speed & battery", "Check features & pricing", "Make an informed decision"].map((item) => (
                <span className="flex items-center gap-2" key={item}>
                  <Check className="h-4 w-4 text-ev" />
                  {item}
                </span>
              ))}
            </div>
          </div>
          <Button className="rounded-lg" href="/scooters" variant="outline">
            Compare Models
          </Button>
        </div>
      </div>
    </section>
  );
}