import React, { Component } from 'react';
import Link from 'gatsby-link';

import { URLService } from 'lib';

import { ClickableContainerProps } from './clickable-container.types';

class ClickableContainer extends Component<ClickableContainerProps> {
  static defaultProps = {
    isLink: true
  };

  render(): JSX.Element | React.ReactNode {
    const { isLink, externalUrl, internalPage, children } = this.props;
    const isExternalLink = externalUrl !== '';

    if (isLink && isExternalLink && externalUrl !== null) {
      return <a href={externalUrl}>{children}</a>;
    }

    if (isLink && internalPage !== null && internalPage !== undefined) {
      return <Link to={internalPage.fields.slug}>{children}</Link>;
    }

    return children;
  }
}

export default ClickableContainer;