import type { SVGProps } from "react";

type IconProps = SVGProps<SVGSVGElement> & { size?: number };

function base({ size = 16, ...props }: IconProps) {
  return {
    width: size,
    height: size,
    viewBox: "0 0 16 16",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.5,
    "aria-hidden": true as const,
    focusable: false as const,
    ...props,
  };
}

export function ArrowRight(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M2.5 8h10M8.75 4.25 12.5 8l-3.75 3.75" strokeLinecap="square" />
    </svg>
  );
}

export function ArrowUpRight(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M4.5 11.5 11.25 4.75M5.5 4.5h6v6" strokeLinecap="square" />
    </svg>
  );
}

export function ChevronDown(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="m4 6 4 4 4-4" strokeLinecap="square" />
    </svg>
  );
}

export function PlusMinus(props: IconProps) {
  return (
    <svg {...base(props)} className={`faq-icon ${props.className ?? ""}`}>
      <line x1="3" y1="8" x2="13" y2="8" />
      <line x1="8" y1="3" x2="8" y2="13" />
    </svg>
  );
}

export function Check(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="m3.5 8.25 3 3 6-6.5" strokeLinecap="square" />
    </svg>
  );
}

export function Menu(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M2 5h12M2 11h12" />
    </svg>
  );
}

export function Close(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="m3.5 3.5 9 9M12.5 3.5l-9 9" />
    </svg>
  );
}

export function LoopArrow(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M13 8a5 5 0 1 1-1.46-3.54" strokeLinecap="square" />
      <path d="M12.5 1.75V5h-3.25" strokeLinecap="square" />
    </svg>
  );
}

export function Alert(props: IconProps) {
  return (
    <svg {...base(props)}>
      <circle cx="8" cy="8" r="6.25" />
      <path d="M8 4.75v4M8 10.75v.5" strokeLinecap="square" />
    </svg>
  );
}