import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import css from './podcast-card.css';
import SlimButton from '../slim-button/slim-button';

const PodcastCard = ({
  headline,
  description,
  imageProps,
  url,
  topic,
  cadence,
  largeHeadline,
  className,
  ctaText,
  ctaFunction,
  LinkComponent,
  ImgComponent,
  clickable,
  ...otherProps
}) => (
  <div
    className={classnames([css['ds-podcast-card'], className])}
    {...otherProps}
  >
    <ImgComponent
      className={css['ds-podcast-card__image']}
      alt=''
      {...imageProps}
    />
    <p className={css['ds-podcast-card__subheadline']}>
      <span className={css['ds-podcast-card__subheadline--bold']}>{topic}</span>
      {cadence && ` | ${cadence}`}
    </p>
    <LinkComponent
      href={url}
      className={classnames([
        css['ds-podcast-card__headline'],
        {
          [css['ds-podcast-card__headline--large']]: largeHeadline,
          [css['ds-podcast-card__headline--clickable']]: clickable,
        },
      ])}
    >
      {headline}
    </LinkComponent>
    <p className={css['ds-podcast-card__description']}>{description}</p>
    {ctaText && ctaFunction && (
      <SlimButton
        className='ds-podcast-card__cta'
        onClick={ctaFunction}
        secondary
      >
        {ctaText}
      </SlimButton>
    )}
  </div>
);

PodcastCard.defaultProps = {
  className: '',
  cadence: null,
  largeHeadline: false,
  ctaText: null,
  ctaFunction: null,
  LinkComponent: 'a',
  ImgComponent: 'img',
  clickable: true,
};

PodcastCard.propTypes = {
  /** The headline of the podcast */
  headline: PropTypes.string.isRequired,
  /** The description of the podcast */
  description: PropTypes.string.isRequired,
  /** The props for the image, i.e. src, alt, srcset */
  imageProps: PropTypes.shape({
    src: PropTypes.string.isRequired,
    alt: PropTypes.string,
    srcset: PropTypes.string,
    sizes: PropTypes.string,
  }).isRequired,
  /** The URL of the podcast page */
  url: PropTypes.string.isRequired,
  /** The topic of the podcast, i.e. Current Affairs */
  topic: PropTypes.string.isRequired,
  /** The cadence of the podcast, i.e. Weekly */
  cadence: PropTypes.string,
  /** Whether the headline text should go larger on large screens */
  largeHeadline: PropTypes.bool,
  /** The call to action text, if not provided no CTA will be rendered */
  ctaText: PropTypes.string,
  /** The call to action function, if not provided no CTA will be rendered */
  ctaFunction: PropTypes.func,
  /** Additional classes to be added to the card */
  className: PropTypes.string,
  /** Component to be used as the link */
  LinkComponent: PropTypes.elementType,
  /** Component to be used as the img */
  ImgComponent: PropTypes.elementType,
  /** Whether the card is clickable or not */
  clickable: PropTypes.bool,
};

export default PodcastCard;
