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 '../../shared/components/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;