import _identity from 'lodash/identity'
import React from 'react'
import SVG from 'react-inlinesvg'

import { getImage } from '../../utils/getImage'

interface IShareButtonProps {
  url: string;
  disabled: boolean;
  children: Node;
}

export const SpotifyIcon = () => <SVG src={getImage('spotify.svg')} />

export const InstagramIcon = () => <SVG src={getImage('instagram.svg')} />

export const SocialButton = (props: IShareButtonProps) => {
  const { children, url, disabled } = props

  const handleClick = () => {
    window.open(url)
  }

  return (
    <button
      className={`react-share__ShareButton ${disabled ? 'disabled-action' : ''}`}
      type="button"
      onClick={!disabled ? handleClick : _identity}
    >
      {children}
    </button>
  )
}