import React, { useContext } from 'react';
import { Tag } from '../../types';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';

interface FlightBannerProps {
  tag: Tag;
  luggageIncluded: boolean;
}

const FlightBannerComponent: React.FC<FlightBannerProps> = ({ tag, luggageIncluded }) => {
  const context = useContext(SearchResultsConfigurationContext);
  return (
    <div className="search__flight-card-banner">
      <div className="search__flight-card-banner-info">
        {tag.icon}
        <p className="search__flight-card-banner-text">{tag.label}</p>
      </div>
      {luggageIncluded && (
        <div className="search__flight-card-banner-info">
          <svg id="search-flightLeg-suitcase-icon" viewBox="0 0 10.978 15.967" width={10.98} height={15.97}>
            <path
              id="luggage_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
              d="M217.5-849.031a1.492,1.492,0,0,1-1.05-.416,1.338,1.338,0,0,1-.447-1.019v-9.044a1.442,1.442,0,0,1,.439-1.057,1.437,1.437,0,0,1,1.055-.44h1.495v-1.5a1.443,1.443,0,0,1,.439-1.057,1.447,1.447,0,0,1,1.063-.44h2a1.443,1.443,0,0,1,1.057.439,1.438,1.438,0,0,1,.44,1.055v1.495h1.5a1.443,1.443,0,0,1,1.057.439,1.447,1.447,0,0,1,.44,1.063v9.023a1.372,1.372,0,0,1-.447,1.028,1.47,1.47,0,0,1-1.05.428v.1a.86.86,0,0,1-.26.637.844.844,0,0,1-.613.257.844.844,0,0,1-.613-.257.86.86,0,0,1-.26-.637v-.1h-4.491v.125a.844.844,0,0,1-.257.613.861.861,0,0,1-.637.26.8.8,0,0,1-.607-.26.864.864,0,0,1-.245-.613Zm0-1.5h7.984v-8.982H217.5Zm1.746-1h1.5v-6.986h-1.5Zm2.994,0h1.5v-6.986h-1.5Zm-1.746-9.481h2v-1.5h-2ZM221.489-855.018Z"
              transform="translate(-216 864)"
              fill="#707070"
            />
          </svg>
          <p className="search__flight-card-banner-text">Luggage included</p>
        </div>
      )}
    </div>
  );
};

export default FlightBannerComponent;