import React, { useContext } from "react";
import Loader from "../../shared/components/loader";
import Rating from "./rating";
import { getTranslations } from "../../shared/utils/localization-util";
import SettingsContext from "../settings-context";
import Icon from "./icon";

interface HeaderProps {
  name: string;
  rating: number | undefined;
  priceText: string | undefined;
  hasFlight: boolean;
  hasTransfer: boolean;
  isLoading: boolean;
}

const Header: React.FC<HeaderProps> = ({
  name,
  rating,
  priceText,
  isLoading,
  hasFlight,
  hasTransfer,
}) => {
  const { language } = useContext(SettingsContext);
  const translations = getTranslations(language);

  return (
    <div className="booking-product__header">
      <div className="booking-product__hotel">
        {rating && <Rating rating={rating} />}
        <div className="booking-product__title">{name}</div>
      </div>
      <div className="booking-product__price">
        {isLoading ? (
          <Loader loaderText={translations.PRODUCT.LOADING_PRICE} />
        ) : (
          <>
            <div className="pricing__header pricing__price">{priceText}</div>
            <div className="package-icons">
              {priceText && (
                <div className="package-icons__icon">
                  <Icon
                    name="ui-bed"
                    title={translations.PRODUCT.STAY_INCLUDED}
                    width={25}
                    height={25}
                  />
                </div>
              )}
              {hasFlight && (
                <div className="package-icons__icon">
                  <Icon
                    name="ui-flight"
                    title={translations.PRODUCT.FLIGHT_INCLUDED}
                    width={25}
                    height={25}
                  />
                </div>
              )}
              {hasTransfer && (
                <div className="package-icons__icon">
                  <Icon
                    name="ui-transfer"
                    title={translations.PRODUCT.TRANSFER_INCLUDED}
                    width={25}
                    height={25}
                  />
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Header;