import React, { useContext } from 'react';
import Icon from '../../../../shared/components/icon';
import { ExtendedFlightSearchResponseItem } from '../../../types';
import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
import { getTranslations } from '../../../../shared/utils/localization-util';
import PairedFlightOption from './paired-flight-option';

interface PairedFlightSelectionProps {
  searchResults: ExtendedFlightSearchResponseItem[];
}

const PairedFlightSelection: React.FC<PairedFlightSelectionProps> = ({ searchResults }) => {
  const context = useContext(SearchResultsConfigurationContext);
  const translations = getTranslations(context?.languageCode ?? 'en-GB');

  return (
    <>
      <div className="search__results__label search__results__label--secondary">
        <div className="search__results__label__date">
          <Icon name="ui-flight" height={16} fill="white" />
        </div>
        <div className="search__results__label__text">
          <h3>
            {translations.SRP.SELECT} <strong> {translations.SIDEBAR.FLIGHT}</strong>
          </h3>
        </div>
      </div>

      <div className="search__results__cards search__results__cards--extended">
        {searchResults.map((result) => (
          <PairedFlightOption key={`flight-${result.guid}`} item={result} />
        ))}
      </div>
    </>
  );
};

export default PairedFlightSelection;