import React from 'react';
import { FeaturedTrip } from './types';
import Icon from '../../shared/components/icon';
import { getTranslations } from '../../shared/utils/localization-util';

const FeaturedTripCard: React.FC<FeaturedTrip> = ({ imageSrc, imageAlt, title, location, language, onButtonClick }) => {
  const translations = getTranslations(language ?? 'en-GB');

  return (
    <div className="image-card">
      <img src={imageSrc} alt={imageAlt} className="image-card__image" />
      <div className="image-card__content">
        <div className="image-card__top">
          <h3 className="image-card__title">{title}</h3>
          <div className="image-card__options">
            <div className="image-card__option">
              <Icon name="ui-location" width={16} height={16} />
              <span>{location}</span>
            </div>
            {/* <div className="image-card__option">
              <Icon name="ui-moon" width={16} height={16} />
              <span>2 nights</span>
            </div>
            <div className="image-card__option">
              <Icon name="ui-plane" width={16} height={16} />
              <span>3 transports</span>
            </div> */}
          </div>
          {/* <p className="image__card__description">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
          </p> */}
        </div>
        <div className="image-card__bottom">
          {/* <div className="image-card__price">
            From
            <p className="image-card__price--amount">$899</p>
            Per Person
          </div> */}
          <button className="cta cta--select" onClick={onButtonClick}>
            {translations.PRODUCT.BOOK_NOW}
          </button>
        </div>
      </div>
    </div>
  );
};

export default FeaturedTripCard;