import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { EvArrowRightIcon, EvBatteryIcon, EvChargingIcon, EvSpeedIcon } from "@/components/ui/ev-icons";
import { scooters as mockScooters, type Scooter } from "@/lib/mock-data";

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

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

export function TopModels({ scooters = mockScooters }: TopModelsProps) {
  const featured = scooters.filter((scooter) => scooter.isFeatured);
  const topModels = (featured.length > 0 ? featured : scooters).slice(0, 6);

  return (
    <section className="bg-white py-3">
      <div className="container-custom">
        <div className="mb-4 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <span className="h-1 w-9 rounded-full bg-primary" />
            <h2 className="text-sm font-extrabold uppercase tracking-[0.08em] text-navy-deep md:text-base">
              Top Models
            </h2>
          </div>
          <Link
            href="/scooters"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary"
          >
            View All Models <EvArrowRightIcon className="h-4 w-4" />
          </Link>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
          {topModels.map((scooter, index) => {
            return (
              <article
                key={scooter.id}
                className="soft-card flex min-h-[345px] flex-col p-3"
              >
                <div className="relative rounded-xl bg-white p-2">
                  {index === 0 ? (
                    <Badge variant="green" className="absolute left-0 top-0">
                      Bestseller
                    </Badge>
                  ) : null}
                  <img
                    src={scooter.thumbnailImage}
                    alt={scooter.name}
                    className="aspect-[4/3] w-full object-contain"
                  />
                </div>
                <div className="flex flex-1 flex-col pt-4">
                  <h3 className="text-sm font-black text-navy-deep">
                    {scooter.name}
                  </h3>
                  <p className="mt-2 text-base font-black text-ev-deep">
                    {formatPrice(scooter.offerPrice)}
                  </p>
                  <div className="mt-4 grid grid-cols-3 gap-2 text-[10px] text-navy-muted">
                    <span>
                      <EvBatteryIcon className="mb-1 h-4 w-4 text-primary" />
                      {scooter.rangeKm} km
                      <span className="block text-[10px]">Range</span>
                    </span>
                    <span>
                      <EvSpeedIcon className="mb-1 h-4 w-4 text-primary" />
                      {scooter.topSpeedKmph} km/h
                      <span className="block text-[10px]">Top Speed</span>
                    </span>
                    <span>
                      <EvChargingIcon className="mb-1 h-4 w-4 text-primary" />
                      {scooter.chargingTime}
                      <span className="block text-[10px]">Charge</span>
                    </span>
                  </div>
                  <Button
                    className="mt-auto h-9 w-full rounded-lg border-ev/70 text-ev-deep"
                    href={`/scooters/${scooter.slug}`}
                    variant="outline"
                  >
                    View Details
                  </Button>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}