import React, { useContext } from 'react';
import { FlightResult } from '../../types';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';
import FlightLegComponent from './flight-leg';

interface FlightCardProps {
  result: FlightResult;
}

const FlightCard: React.FC<FlightCardProps> = ({ result }) => {
  const context = useContext(SearchResultsConfigurationContext);
  return (
    <div className="search__result search__result--flight">
      {/* -------------------- flightcard -------------------- */}
      <div className="search__flight-card">
        {/* outbound part */}
        <FlightLegComponent leg={result.outbound} />

        {/* return part */}
        <FlightLegComponent leg={result.return} />
      </div>

      {/* -------------------- pricecard -------------------- */}
      <div className="search__price-card">
        <div className="search__price-card-price-wrapper">
          <p className="search__price-card-price">{result.price}</p>
        </div>
        <div>
          <button className="search__price-card-button" onClick={() => console.log('clicked result with ID:', result.id)}>
            {result.ctaText}
          </button>
        </div>
      </div>
    </div>
  );
};

export default FlightCard;