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;