- const {initial, clicked, complete, reset} = $component.states

.mp-share-button
  .mp-share-animations(
    class={
      'mp-share-fade-out': status === clicked,
      'mp-share-fade-in-out': status === complete,
      'mp-share-fade-in': status === reset,
    }
  )
    case status
      when initial
      when clicked
      when reset
        .mp-share-message.mp-share-click(
          on={
            click: event => $helpers.handleClick(event),
          }
        )
          svg-icon(attrs={icon: `share`})
          .mp-share-label Share
      when complete
        .mp-share-message.mp-share-success
          svg-icon(attrs={icon: `check-checkbox`})
          .mp-share-label Link Copied!