"use client";

import { Zap } from "lucide-react";

import { cn } from "@/lib/utils";

export function EvOnlyFloatingToggle({
  pressed,
  onPressedChange,
  label = "EV only",
}: {
  pressed: boolean;
  onPressedChange: (pressed: boolean) => void;
  label?: string;
}) {
  return (
    <div className="fixed inset-x-0 bottom-5 z-40 flex justify-center px-4 pb-[env(safe-area-inset-bottom)] pointer-events-none">
      <button
        type="button"
        onClick={() => onPressedChange(!pressed)}
        aria-pressed={pressed}
        style={{ fontFamily: "var(--font-space-grotesk), 'Space Grotesk', sans-serif" }}
        className={cn(
          "pointer-events-auto inline-flex h-14 min-w-40 items-center justify-center gap-2 rounded-full border px-5 text-sm font-black shadow-[0_18px_44px_rgba(0,0,0,0.24)] transition-all duration-300 ease-out hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-emerald-300/60",
          pressed
            ? "border-emerald-300 bg-emerald-500 text-white shadow-[0_18px_44px_rgba(16,185,129,0.34)] hover:bg-emerald-600"
            : "border-emerald-300 bg-white text-emerald-700 hover:border-emerald-400 hover:bg-emerald-50",
        )}
      >
        <span
          className={cn(
            "grid h-8 w-8 place-items-center rounded-full transition-all duration-300 ease-out",
            pressed ? "bg-white/20" : "bg-emerald-100",
          )}
        >
          <Zap
            className={cn(
              "h-4 w-4 transition-transform duration-300",
              pressed && "rotate-12 scale-110",
            )}
          />
        </span>
        {label}
      </button>
    </div>
  );
}