import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

type IconProps = {
  className?: string;
};

function Stroke({
  children,
  className,
  viewBox = "0 0 24 24",
}: {
  children: ReactNode;
  className?: string;
  viewBox?: string;
}) {
  return (
    <svg
      aria-hidden="true"
      viewBox={viewBox}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cn("h-5 w-5", className)}
      stroke="currentColor"
      strokeWidth="1.9"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </svg>
  );
}

export function EvBatteryIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <rect x="4" y="6" width="14" height="12" rx="2.5" />
      <path d="M18 10h2v4h-2" />
      <path d="m10.4 8.6-2.2 4h2l-1.2 2.8 4-4h-2l1-2.8z" />
    </Stroke>
  );
}

export function EvSpeedIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="M4 15a8 8 0 1 1 16 0" />
      <path d="m12 15 4-5" />
      <circle cx="12" cy="15" r="1" />
    </Stroke>
  );
}

export function EvChargingIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="m12 3-4.5 8h3L9.5 21l7-10h-3L16 3z" />
    </Stroke>
  );
}

export function EvShieldIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="M12 3 5.5 6v5.8c0 4 2.8 6.8 6.5 8.2 3.7-1.4 6.5-4.2 6.5-8.2V6z" />
      <path d="m9.3 12.2 1.8 1.8 3.6-3.6" />
    </Stroke>
  );
}

export function EvLeafIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="M19 5c-7 .2-12 4.2-12 10.1 0 2.6 2 4.9 4.9 4.9 5.9 0 9.9-5 10.1-12.1z" />
      <path d="M8.5 15.5c2.1-.2 4.8-1.7 7.4-4.3" />
    </Stroke>
  );
}

export function EvCoinIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <circle cx="12" cy="12" r="7.5" />
      <path d="M10 10.2c0-.9.8-1.5 2-1.5 1.1 0 1.9.5 1.9 1.4 0 .8-.5 1.2-1.7 1.5-1.5.4-2.4.9-2.4 2.1 0 1.2 1 2 2.3 2 1.4 0 2.4-.8 2.4-1.9" />
    </Stroke>
  );
}

export function EvRideIcon({ className }: IconProps) {
  return (
    <Stroke className={className} viewBox="0 0 28 28">
      <circle cx="8" cy="20" r="3" />
      <circle cx="21" cy="20" r="3" />
      <path d="M10 20h8l-2-6h-5l-3 3" />
      <path d="M16 10h2.8" />
      <path d="M19.8 10.2 22 13" />
      <path d="M6.5 16.8h2.5" />
    </Stroke>
  );
}

export function EvWrenchIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="m14.5 4.5 5 5" />
      <path d="m12.6 6.3-8.1 8.1a2.3 2.3 0 0 0 3.2 3.2l8.1-8.1" />
      <path d="M14 4a4 4 0 0 0 5.7 5.7" />
    </Stroke>
  );
}

export function EvSparkIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="M12 3v4" />
      <path d="m7.2 5.2 2.2 2.2" />
      <path d="M5 10h4" />
      <path d="m19 10-3 0" />
      <path d="m16.8 5.2-2.2 2.2" />
      <path d="m12 10 2.5 5H12l-1 6-2-7h2.3z" />
    </Stroke>
  );
}

export function EvChevronLeftIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="m14.5 6-6 6 6 6" />
    </Stroke>
  );
}

export function EvChevronRightIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="m9.5 6 6 6-6 6" />
    </Stroke>
  );
}

export function EvArrowRightIcon({ className }: IconProps) {
  return (
    <Stroke className={className}>
      <path d="M5 12h12" />
      <path d="m13 7 5 5-5 5" />
    </Stroke>
  );
}