/**
 * The glyphs on the project action buttons.
 *
 * The previous site put an icon beside each of these labels — a download arrow
 * on the brochure, a globe on the virtual tour, a pin on the location — and the
 * rebuild shipped the buttons bare. They are drawn inline rather than loaded
 * from a sprite or an icon package: there are four of them, they never change,
 * and an inline path costs no request and no hydration.
 *
 * `currentColor` is deliberate. A `.btn` inverts its label to black as the fill
 * wipes up on hover, and an icon with a fixed fill would stay gold on gold and
 * disappear exactly the way the labels used to.
 */

export type ActionIconName = "download" | "globe" | "pin" | "play";

const PATHS: Record<ActionIconName, string> = {
  // Arrow into a tray.
  download:
    "M12 3a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.42l2.3 2.3V4a1 1 0 0 1 1-1ZM4 17a1 1 0 0 1 1 1v1h14v-1a1 1 0 1 1 2 0v1.5A1.5 1.5 0 0 1 19.5 21h-15A1.5 1.5 0 0 1 3 19.5V18a1 1 0 0 1 1-1Z",
  // Meridians and a parallel.
  globe:
    "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.93 9h-3.02a15.6 15.6 0 0 0-1.2-5.42A8.02 8.02 0 0 1 18.93 11ZM12 4.14c.74 1.02 1.62 3.1 1.86 6.86h-3.72c.24-3.76 1.12-5.84 1.86-6.86ZM5.07 11a8.02 8.02 0 0 1 4.22-5.42A15.6 15.6 0 0 0 8.09 11H5.07ZM8.09 13c.13 2.2.55 4.05 1.2 5.42A8.02 8.02 0 0 1 5.07 13h3.02Zm2.05 0h3.72c-.24 3.76-1.12 5.84-1.86 6.86-.74-1.02-1.62-3.1-1.86-6.86Zm4.57 5.42c.65-1.37 1.07-3.22 1.2-5.42h3.02a8.02 8.02 0 0 1-4.22 5.42Z",
  // Map marker.
  pin: "M12 2a7 7 0 0 0-7 7c0 5.05 6.26 12.4 6.53 12.71a.63.63 0 0 0 .94 0C12.74 21.4 19 14.05 19 9a7 7 0 0 0-7-7Zm0 9.75A2.75 2.75 0 1 1 12 6.25a2.75 2.75 0 0 1 0 5.5Z",
  // Triangle in a circle.
  play: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.5 6.32a.6.6 0 0 1 .91-.52l4.4 2.68a.6.6 0 0 1 0 1.04l-4.4 2.68a.6.6 0 0 1-.91-.52V8.32Z",
};

export default function ActionIcon({ name }: { name: ActionIconName }) {
  return (
    <svg
      className={`btn-icon btn-icon--${name}`}
      viewBox="0 0 24 24"
      aria-hidden="true"
      focusable="false"
    >
      <path d={PATHS[name]} />
    </svg>
  );
}