Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useSelector } from 'react-redux'
import { Button, styled } from '@mui/material'

import List from '@components/common/list'
import { FacebookIcon, GoogleIcon, XIcon } from '@components/common/icons'

const SocialButton = styled(Button)`
  background-color: white;
  border: 1px solid black;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: #383838;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  svg {
    width: 16px;
    height: 16px;
  }
`

export default function SocialNetworksSignin({
  facebookOauth = '/signin/facebook',
  twitterOauth = '/signin/twitter',
  googleOauth = '/signin/google'
}) {
  const { access_usign_social_networks } = useSelector((state) => state.auth)

  const socialNetworksAccessAllowed = access_usign_social_networks === 'y'

  const options = [
    { label: 'Facebook', icon: <FacebookIcon />, href: facebookOauth },
    { label: 'Twitter', icon: <XIcon />, href: twitterOauth },
    { label: 'Google', icon: <GoogleIcon />, href: googleOauth }
  ]

  if (!socialNetworksAccessAllowed) return

  return (
    <List
      items={options}
      renderItem={({ icon, label }) => (
        <SocialButton>
          {icon}
          {label}
        </SocialButton>
      )}
    />
  )
}