Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import styled from 'styled-components'

const StyledButton = styled.button`
  border-radius: 30px;
  align-items: center;
  padding: 0.2rem 1rem;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  overflow: hidden;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  &:hover {
    background-color: whitesmoke;
  }
  &:disabled {
    cursor: no-drop;
  }
`

export const Button = ({
  onClick = () => {},
  label = 'Confirmar',
  icon: Icon = null,
  ...rest
}) => {
  return (
    <StyledButton onClick={() => onClick()} {...rest}>
      {Icon && <Icon />}
      {label}
    </StyledButton>
  )
}

const BtnPrimary = styled(Button)`
  background-color: var(--button-bg);
  color: var(--button-text-color);
  &:hover {
    background-color: var(--button-bg-hover);
  }
`

export const ButtonPrimary = ({ label, icon, ...rest }) => {
  return <BtnPrimary label={label} icon={icon} {...rest} />
}

const BtnSecondary = styled(Button)`
  background: var(--button-bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--button-text-color-secondary);
  &:hover {
    background-color: var(--button-bg-secondary-hover);
    border-color: transparent;
  }
`

export const ButtonSecondary = ({ label, icon, ...rest }) => {
  return <BtnSecondary label={label} icon={icon} {...rest} />
}

const BtnTertiary = styled(Button)`
  background-color: var(--button-bg-tertiary);
  border-color: #f4f4f4;
  color: var(--button-text-color-tertiary);
  border: 1px solid transparent;
  &:hover {
    background: #d4d4d4;
    border: 1px solid var(--border-primary);
    color: var(--border-primary);
  }
`

export const ButtonTertiary = ({ label, icon, onClick, ...rest }) => {
  return <BtnTertiary label={label} icon={icon} onClick={onClick} {...rest} />
}