import clsx from 'clsx'
import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon.svg'

export function ReplyToggle(props: {
  seeReplies: boolean
  numComments: number
  onSeeReplyClick?: () => void
}) {
  const {seeReplies, numComments, onSeeReplyClick} = props

  if (numComments === 0) return null

  return (
    <button
      className="text-ink-500 hover:text-primary-500 flex items-center gap-2 text-sm transition-colors"
      onClick={onSeeReplyClick}
    >
      <div className={clsx(numComments === 0 ? 'hidden' : 'flex select-none items-center gap-1')}>
        <TriangleDownFillIcon
          className={clsx('h-2 w-2 transition-transform', seeReplies ? '' : 'rotate-[-60deg]')}
        />
        {numComments} {numComments === 1 ? 'reply' : 'replies'}
      </div>
    </button>
  )
}