/**
 * Mobile Water Log — inline SVG icon set.
 *
 * SF Symbol-style icons drawn at a 24×24 grid with `currentColor`
 * strokes so they tint to whatever text color the parent passes.
 * Avoids the icon-font dependency that would otherwise bloat the
 * mobile bundle. All icons use 1.75px strokes (close to SF's
 * "medium" weight at this size) and rounded line caps for the soft,
 * pen-friendly feel HIG calls for.
 */
import type { SVGProps } from "react";

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

function base({ size = 22, strokeWidth = 1.75, ...rest }: IconProps) {
  return {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
    "aria-hidden": true,
    focusable: false,
    ...rest,
  };
}

/** iOS-style chevron pointing right — used in list rows. */
export function ChevronRight(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M9 5l7 7-7 7" />
    </svg>
  );
}

/** iOS-style chevron pointing left — used in nav bars. */
export function ChevronLeft(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M15 19l-7-7 7-7" />
    </svg>
  );
}

/** A water droplet — used for the app icon and brand mark. */
export function Droplet(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M12 3.5c0 0 -6.5 7 -6.5 11a6.5 6.5 0 0 0 13 0c0 -4 -6.5 -11 -6.5 -11z" />
      <path d="M9 14a3 3 0 0 0 3 3" opacity="0.6" />
    </svg>
  );
}

/** A pin/marker — used for the geocode subtitle. */
export function Pin(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M12 21s7 -6.2 7 -11a7 7 0 1 0 -14 0c0 4.8 7 11 7 11z" />
      <circle cx="12" cy="10" r="2.5" />
    </svg>
  );
}

/** A circular arrow — used for "Log Another Entry". */
export function Refresh(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M3.5 12a8.5 8.5 0 0 1 14.5 -6" />
      <path d="M18 3v4.5h-4.5" />
      <path d="M20.5 12a8.5 8.5 0 0 1 -14.5 6" />
      <path d="M6 21v-4.5h4.5" />
    </svg>
  );
}

/** A back-arrow grid — used for "Back to Headgates". */
export function Grid(props: IconProps) {
  return (
    <svg {...base(props)}>
      <rect x="4" y="4" width="7" height="7" rx="1.5" />
      <rect x="13" y="4" width="7" height="7" rx="1.5" />
      <rect x="4" y="13" width="7" height="7" rx="1.5" />
      <rect x="13" y="13" width="7" height="7" rx="1.5" />
    </svg>
  );
}

/** A gauge — used for the headgate card icon. */
export function Gauge(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M4 14a8 8 0 1 1 16 0" />
      <path d="M12 14l4 -4" />
      <circle cx="12" cy="14" r="1.2" fill="currentColor" stroke="none" />
      <path d="M4 18h16" opacity="0.4" />
    </svg>
  );
}

/** Big checkmark for the success screen. */
export function CheckCircle(props: IconProps) {
  return (
    <svg {...base(props)}>
      <circle cx="12" cy="12" r="9.5" />
      <path d="M8 12.5l2.8 2.8L16 9.5" strokeWidth={2.25} />
    </svg>
  );
}

/** A lock — used on the PIN screen to anchor the brand. */
export function Lock(props: IconProps) {
  return (
    <svg {...base(props)}>
      <rect x="5" y="11" width="14" height="9.5" rx="2" />
      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
      <circle cx="12" cy="15.5" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
}

/** A pencil — used next to notes input. */
export function Pencil(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M4 20h4l10 -10 -4 -4L4 16v4z" />
      <path d="M14 6l4 4" />
    </svg>
  );
}

/** Clock — used for the auto-timestamp display. */
export function Clock(props: IconProps) {
  return (
    <svg {...base(props)}>
      <circle cx="12" cy="12" r="8.5" />
      <path d="M12 7.5V12l3 2" />
    </svg>
  );
}

/** Spinner — used for async states. */
export function Spinner({ size = 22, ...rest }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden
      focusable={false}
      {...rest}
    >
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.2" strokeWidth="2.5" />
      <path
        d="M21 12a9 9 0 0 0 -9 -9"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

/** Alert triangle — used for error states. */
export function AlertTriangle(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M12 3.5L21 19H3L12 3.5z" />
      <path d="M12 10v4" />
      <circle cx="12" cy="16.5" r="0.6" fill="currentColor" stroke="none" />
    </svg>
  );
}

/** Logout — used to exit the PIN session. */
export function Logout(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M15 3.5h4a1.5 1.5 0 0 1 1.5 1.5v14a1.5 1.5 0 0 1 -1.5 1.5h-4" />
      <path d="M10 17l-5 -5 5 -5" />
      <path d="M15 12H5" />
    </svg>
  );
}