import type { ReactNode } from "react";

import { BookingIcon } from "@/components/booking/BookingIcons";

type IconName = "ship" | "user" | "calendar" | "search";

type Props = {
  children: ReactNode;
  className?: string;
  icon?: IconName;
  /** @deprecated Prefer `icon` — kept for rare custom nodes */
  addon?: ReactNode;
};

/** Unified search-row control (icon prefix + field), mock PQE style. */
export function BookingSearchControl({ icon, addon, children, className = "" }: Props) {
  const addonNode = icon ? <BookingIcon name={icon} /> : addon;

  return (
    <div className={`ferry-booking__control ${className}`.trim()}>
      <span className="ferry-booking__control-addon" aria-hidden>
        {addonNode}
      </span>
      <div className="ferry-booking__control-body">{children}</div>
    </div>
  );
}