import React, { Component } from "react"
import { FlexRow } from "styles/flex"
import Icon from "components/common/Icon"

import ko from "date-fns/locale/ko"
import distanceInWordsToNow from "date-fns/distance_in_words_to_now"

interface Props {
  text: string
  icon: string
}

export default class DateText extends Component<Props> {
  render() {
    const { text, icon } = this.props
    var result = distanceInWordsToNow(new Date(text), {
      locale: ko,
    })

    return (
      <FlexRow>
        <Icon icon={icon} />
        <span style={{ margin: "2px" }}>
          {result} 전
        </span>
      </FlexRow>
    )
  }
}