Untitled

import React from 'react'

import styled from 'styled-components'

import { BREAKPOINTS, COLORS, FONTS, SPACING } from './constants'
import { ReactComponent as DefaultLike } from './Icons/assets/like-default.svg'
import { ReactComponent as RedLike } from './Icons/assets/like-red.svg'
import { ReactComponent as Comment } from './Icons/assets/reply.svg'

export const LikeCommentButtons = ({
  isLiked,
  numLikes,
  numReplies,
}: {
  isLiked: boolean
  numLikes: Number
  numReplies: Number
}) => {
  const replyText = numReplies > 0 ? `Reply (${numReplies})` : 'Reply'
  const likeText = numLikes > 0 ? `Like (${numLikes})` : 'Like'

  return (
    <Container>
      <Button>
        <CommentIcon />
        <Text>{replyText}</Text>
      </Button>
      <Button>
        {isLiked ? <RedLikeIcon /> : <DefaultLikeIcon />}
        <Text>{likeText}</Text>
      </Button>
    </Container>
  )
}

const CommentIcon = styled(Comment)`
  width: 16px;
  height: 12px;
  margin-right: ${SPACING[2]};

  ${BREAKPOINTS.SM} {
    width: 22px;
    height: 16px;
  }
`

const DefaultLikeIcon = styled(DefaultLike)`
  width: 14px;
  height: 12px;
  margin-right: ${SPACING[2]};

  ${BREAKPOINTS.SM} {
    width: 18px;
    height: 16px;
  }
`

const RedLikeIcon = styled(RedLike)`
  width: 14px;
  height: 12px;
  margin-right: ${SPACING[2]};

  ${BREAKPOINTS.SM} {
    width: 18px;
    height: 16px;
  }
`

const Container = styled.div`
  display: flex;
  flex-direction: row;
`

const Button = styled.button`
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  :not(:last-child) {
    margin-right: 18px;
  }

  ${BREAKPOINTS.SM} {
    height: 19px;
  }
`

const Text = styled(FONTS.H5)`
  color: ${COLORS.GREEN[100]};
  font-weight: 500;
`