type IconName =
  | "ship"
  | "location"
  | "user"
  | "calendar"
  | "search"
  | "arrow-left"
  | "arrow-right"
  | "chevron-double-left"
  | "chevron-double-right";

type Props = {
  name: IconName;
  className?: string;
};

const strokeProps = {
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.75,
  strokeLinecap: "round" as const,
  strokeLinejoin: "round" as const,
};

/** Outline SVG icons — same weight as site booking/search UI, fixed across browsers. */
export function BookingIcon({ name, className = "ferry-booking__icon" }: Props) {
  switch (name) {
    case "ship":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <path
            d="M4 18h16M6 14l2-6h8l2 6M8 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
            {...strokeProps}
          />
          <path d="M12 18v2" {...strokeProps} />
        </svg>
      );
    case "location":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <path
            d="M12 21s7-4.5 7-11a7 7 0 1 0-14 0c0 6.5 7 11 7 11z"
            {...strokeProps}
          />
          <circle cx="12" cy="10" r="2.25" {...strokeProps} />
        </svg>
      );
    case "user":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <circle cx="12" cy="8" r="3.25" {...strokeProps} />
          <path d="M5 20c0-3.866 3.134-7 7-7s7 3.134 7 7" {...strokeProps} />
        </svg>
      );
    case "calendar":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <rect height="16" rx="2" width="16" x="4" y="5" {...strokeProps} />
          <path d="M4 9h16M8 3v4M16 3v4" {...strokeProps} />
        </svg>
      );
    case "search":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <circle cx="10.5" cy="10.5" r="5.5" {...strokeProps} />
          <path d="M15 15l4.5 4.5" {...strokeProps} />
        </svg>
      );
    case "arrow-left":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <path d="M14 7l-6 5 6 5" {...strokeProps} />
          <path d="M20 12H8" {...strokeProps} />
        </svg>
      );
    case "arrow-right":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <path d="M10 7l6 5-6 5" {...strokeProps} />
          <path d="M4 12h12" {...strokeProps} />
        </svg>
      );
    case "chevron-double-left":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <path d="M13 7l-5 5 5 5" {...strokeProps} />
          <path d="M19 7l-5 5 5 5" {...strokeProps} />
        </svg>
      );
    case "chevron-double-right":
      return (
        <svg aria-hidden className={className} viewBox="0 0 24 24">
          <path d="M11 7l5 5-5 5" {...strokeProps} />
          <path d="M5 7l5 5-5 5" {...strokeProps} />
        </svg>
      );
    default:
      return null;
  }
}