import React, { FC, ReactType } from 'react';
import DefaultLink, { LinkProps } from '../../blocks/Link';

import ClockSVG from '../../assets/icons/clock.svg';
import css from './index.module.css';

export interface PackageProps {
  title: string;
  description: string;
  duration: string;
  durationText?: string;
  price: string;
  currency: string;
  Link: ReactType<LinkProps>;
  LinkProps: LinkProps;
}

const Package: FC<PackageProps> = ({
  title,
  description,
  duration,
  durationText,
  price,
  currency,
  Link = DefaultLink,
  LinkProps,
}) => (
  <div className={css.package}>
    <div className={css.package__information}>
      <h1>{title}</h1>
      <div className={css.package__duration}>
        <span className={css.package__durationIcon}>
          <ClockSVG height="16px" style={{ verticalAlign: 'bottom' }} />
        </span>
        {durationText} {duration}
      </div>
      <div>
        <ul>
          {description &&
            description.split('\n').map((item, i) => <li key={i}>{item}</li>)}
        </ul>
      </div>
    </div>

    <div className={css.package__booking}>
      <div className={css.package__price}>
        {price} {currency}
      </div>
      <div className={css.package__button}>
        <Link {...LinkProps} variant="primary" />
      </div>
    </div>
  </div>
);

export default Package;