import Link from "next/link";
import { BatteryCharging, Gauge, Timer } from "lucide-react";
import { Button } from "@/components/ui/button";
import { scooters } from "@/lib/mock-data";

function formatPrice(value: number) {
  return `Rs. ${value.toLocaleString("en-NP")}`;
}

export function ScooterSelection() {
  return (
    <section className="bg-white py-8">
      <div className="container-custom">
        <div className="mb-5 flex items-center justify-between gap-4">
          <h2 className="text-2xl font-bold text-navy-deep">Choose Your Scooter</h2>
          <Link href="/scooters" className="text-sm font-bold text-primary">
            View All Models
          </Link>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {scooters.filter((scooter) => scooter.isFeatured).slice(0, 4).map((scooter) => (
            <article className="soft-card p-4" key={scooter.id}>
              <div className="flex items-center gap-4">
                <img
                  src={scooter.thumbnailImage}
                  alt={scooter.name}
                  className="h-28 w-32 rounded-2xl bg-primary-soft object-cover"
                />
                <div>
                  <h3 className="font-bold text-navy-deep">{scooter.name}</h3>
                  <p className="mt-1 text-sm font-bold text-ev-deep">
                    {formatPrice(scooter.offerPrice)}
                  </p>
                </div>
              </div>
              <div className="mt-4 grid grid-cols-3 gap-2 text-xs text-navy-muted">
                <span className="rounded-xl bg-slate-50 p-2">
                  <BatteryCharging className="mb-1 h-4 w-4 text-primary" />
                  {scooter.rangeKm} km
                </span>
                <span className="rounded-xl bg-slate-50 p-2">
                  <Gauge className="mb-1 h-4 w-4 text-primary" />
                  {scooter.topSpeedKmph} km/h
                </span>
                <span className="rounded-xl bg-slate-50 p-2">
                  <Timer className="mb-1 h-4 w-4 text-primary" />
                  {scooter.chargingTime}
                </span>
              </div>
              <Button className="mt-4 w-full" href={`/scooters/${scooter.slug}`} variant="outline" size="sm">
                View Details
              </Button>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}