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>
      )}
    />
  );
}