import type { FC } from "react";
import { useTranslation } from "@/i18n/provider.js";
import type { IMealItem, MealType } from "../../types.js";
import { MEAL_LINKS } from "./shared.js";
import econoIcon from "./icons/econom.svg";
import comfortIcon from "./icons/comfort.svg";
import businessIcon from "./icons/business.svg";
import "./panels.scss";

const MEAL_ICON_URL: Record<Exclude<MealType, "Special">, string> = {
  Economy: econoIcon,
  Comfort: comfortIcon,
  Business: businessIcon,
};

const MEAL_LABEL_KEYS: Record<Exclude<MealType, "Special">, string> = {
  Economy: "DETAILS.MEAL_ECONOMY",
  Comfort: "DETAILS.MEAL_COMFORT",
  Business: "DETAILS.MEAL_BUSINESS",
};

const MEAL_ORDER = ["Economy", "Comfort", "Business"] as const;

export interface MealPanelProps {
  meals: IMealItem[];
}

export const MealPanel: FC<MealPanelProps> = ({ meals }) => {
  const { t } = useTranslation();
  const types = new Set(meals.map((m) => m.type));

  return (
    <div className="details-panel" data-testid="meal-panel">
      <div className="details-panel__icons">
        {MEAL_ORDER.map((type) =>
          types.has(type) ? (
            <a
              key={type}
              href={MEAL_LINKS[type]}
              target="_blank"
              rel="noopener noreferrer"
              className="details-panel__icon"
            >
              <img
                src={MEAL_ICON_URL[type]}
                alt={t(MEAL_LABEL_KEYS[type])}
                data-testid={`meal-icon-${type}`}
              />
              <span>{t(MEAL_LABEL_KEYS[type])}</span>
            </a>
          ) : null,
        )}
      </div>
    </div>
  );
};
