import type { FC } from "react";
import type { IOnBoardService } from "../../types.js";
import { SERVICE_ICON_MAP, SERVICE_ICON_FALLBACK } from "./shared.js";
import shoppingIcon from "./icons/shopping.svg";
import spaceIcon from "./icons/space.svg";
import taxiIcon from "./icons/taxi.svg";
import wifiIcon from "./icons/wifi.svg";
import gsmIcon from "./icons/gsm.svg";
import entertainmentIcon from "./icons/entertaintment.svg";
import seatReservationIcon from "./icons/seat_reservation.svg";
import comfortPlusIcon from "./icons/comfort-plus.svg";
import "./panels.scss";

const ICON_BY_NAME: Record<string, string> = {
  shopping: shoppingIcon,
  space: spaceIcon,
  taxi: taxiIcon,
  wifi: wifiIcon,
  gsm: gsmIcon,
  entertaintment: entertainmentIcon,
  seat_reservation: seatReservationIcon,
  "comfort-plus": comfortPlusIcon,
};

export interface ServicesPanelProps {
  services: IOnBoardService[];
}

export const ServicesPanel: FC<ServicesPanelProps> = ({ services }) => {
  return (
    <div className="details-panel" data-testid="services-panel">
      <div className="details-panel__icons">
        {services.map((svc) => {
          // API payload now types svc.id as number | string — coerce to
          // number before looking up the icon map (keyed by numeric id).
          const idNumeric = typeof svc.id === "string" ? Number(svc.id) : svc.id;
          const iconName = SERVICE_ICON_MAP[idNumeric] ?? SERVICE_ICON_FALLBACK;
          const iconSrc =
            ICON_BY_NAME[iconName] ?? ICON_BY_NAME[SERVICE_ICON_FALLBACK] ?? "";
          const alt = svc.title ?? `service-${svc.id}`;
          const img = (
            <img
              src={iconSrc}
              alt={alt}
              data-testid={`service-icon-${svc.id}`}
            />
          );

          return svc.url ? (
            <a
              key={svc.id}
              href={svc.url}
              target="_blank"
              rel="noopener noreferrer"
              className="details-panel__icon"
            >
              {img}
              {svc.title && <span>{svc.title}</span>}
            </a>
          ) : (
            <span key={svc.id} className="details-panel__icon">
              {img}
              {svc.title && <span>{svc.title}</span>}
            </span>
          );
        })}
      </div>
    </div>
  );
};
