import * as React from "react"
import styled from "styled-components"
import { getConfig } from "jamplay-common/remote-config"

const config = getConfig().publicRuntimeConfig

const Sprite = styled.div`
  background-image: url(${config.staticFolder || ""}/ui-assets/images/social-icon/${(props: any) => props.name}.png);
  background-repeat: no-repeat;
  position: relative;
  background-size: contain;
  @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    background-image: url(${config.staticFolder || ""}/ui-assets/images/social-icon/${(props: any) => props.name}@2x.png);
  }
` as any
const ChildContainer = styled.div`
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
`
const SocialIcon = ({ children, name, className, style }: { children?: any, name: string, className?: string, style?: any }) => (
  <Sprite name={name} className={className} style={style}>
    <img src={`${config.staticFolder || ""}/ui-assets/images/social-icon/${name}.png`} style={{ opacity: 0, display: "block", maxWidth: "100%" }} />
    <ChildContainer className="child-wrap">
      {children}
    </ChildContainer>
  </Sprite>
)

const SocialMediaIcon = styled(SocialIcon)`
  float: left;
  margin: 0 10px;
  opacity: 1;
  &:hover {
    opacity:0.7;
  }
` as any

export const SocialMediaItem = ({link, name}) => {
  return (
    <a className="social-icon" href={link} target="_blank">
      <SocialMediaIcon alt="" name={name} />
    </a>
  )
}

export default SocialIcon