import * as React from 'react'
import { IClickTrackActivity } from '../../../modules/activity/interfaces'

interface ClickTrackActivityProps {
  activity: IClickTrackActivity,
}

const ClickTrackActivity = ({ activity }: ClickTrackActivityProps): JSX.Element => {
  return (
    <div className="popup-feed-activity-description">
      <span className="activity-page-view">{activity.click.linkText ? 'Clicked link: ' : 'Clicked '}</span>
      <a href={activity.click.url} target="_blank">{activity.click.linkText || 'a link'}</a>
      <span className="activity-page-view"> from email </span>
      {
        activity.click.gmailId
          ? (
            <a href={`https://mail.google.com/mail/u/0/#sent/${activity.click.gmailId}`} target="_blank">
              {activity.click.emailSubject || <em>no subject</em>}
            </a>
          )
          : activity.click.emailSubject || <em>no subject</em>
      }
    </div>
  )
}

export default ClickTrackActivity