import React from 'react'
import PropTypes from 'prop-types'

import { StackWrap, Typography, useThemeTokens } from '@telus-uds/components-base'

/**
 * A footer for PreviewCard that composes author and date in a standard way
 *
 * @TODO
 * Add same locale-based date formatting as StoryCard when ready.
 * Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
 */
const AuthorDate = React.forwardRef(({ author, date }, ref) => {
  const { separatorColor: color } = useThemeTokens('PreviewCard', {}, {})
  return (
    <StackWrap space={2} ref={ref}>
      <Typography variant={{ size: 'small', colour: 'secondary' }}>{author}</Typography>
      <Typography variant={{ size: 'small' }} tokens={{ color }}>
        ·
      </Typography>
      <Typography variant={{ size: 'small', colour: 'secondary' }}>{date}</Typography>
    </StackWrap>
  )
})

AuthorDate.displayName = 'AuthorDate'

AuthorDate.propTypes = {
  /**
   * Name of the author
   */
  author: PropTypes.string.isRequired,
  /**
   * Date of the post
   */
  date: PropTypes.string.isRequired
}

export default AuthorDate