import { ISocialLinks } from './SocialLinks.interface'
import Icon from '../Icon/Icon.component'
import React from 'react'
import { StyledSocialLinks } from './SocialLinks.theme'

const SocialLinks = ({
  variant,
  socials,
  className,
  style,
  ...props
}: ISocialLinks) => {
  if (!socials) return <></>

  return (
    <StyledSocialLinks variant={variant} className={className} style={style}>
      {Object.keys(socials).map((social: string) => {
        return (
          <li>
            <a
              href={socials[social]}
              target="_blank"
              aria-label={social}
              rel="noreferrer"
            >
              <Icon icon={`icon-${social}`}></Icon>
            </a>
          </li>
        )
      })}
    </StyledSocialLinks>
  )
}

export default SocialLinks