button

import PropTypes from 'prop-types';
import React from 'react';
import styled, { css } from 'styled-components';

const ButtonNew = ({ children, className, variant = 'primary', type = 'button', disabled, onClick }) => {
  return (
    <StyledButton variant={variant} type={type} className={className} disabled={disabled} onClick={onClick}>
      {children}
    </StyledButton>
  );
};

const StyledButton = styled.button`
  border-radius: 5px;
  width: 100%;
  padding: 9px;
  transition: all 0.3s ease-in-out;
  border: ${({ variant }) => BUTTON_BORDER[variant]};
  background-color: ${({ variant }) => BUTTON_COLOR[variant]};
  color: ${({ variant }) => BUTTON_TEXT_COLOR[variant]};

  :hover {
    ${({ variant }) => BUTTON_HOVER[variant]};
  }

  :active {
    transform: translateY(-5px);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    ${({ variant }) => BUTTON_ACTIVE[variant]};
  }

  :disabled {
    ${({ variant }) => BUTTON_DISABLED[variant]};
  }
`;

const BUTTON_BORDER = {
  primary: 'none',
  secondary: '1px solid var(--cs-ui--switch-bg-color)',
};

const BUTTON_COLOR = {
  primary: 'var(--cs-general--second-color)',
  secondary: 'transparent',
};

const BUTTON_TEXT_COLOR = {
  primary: 'var(--cs-general--navigation-line-color)',
  secondary: 'var(--cs-general--brand-color)',
};

const BUTTON_HOVER = {
  primary: css`
    background-color: var(--cs-general--brand-color);
  `,
  secondary: css`
    border-color: var(--cs-general--second-color);
  `,
};

const BUTTON_ACTIVE = {
  primary: css`
    background-color: var(--cs-ui--button-hover-color);
  `,
  secondary: css`
    background-color: var(--cs-ui--button-active-color);
  `,
};

const BUTTON_DISABLED = {
  primary: css`
    background-color: var(--cs-ui--button-hover-color);
    color: var(--cs-general--second-color);
  `,
  secondary: css`
    border-color: var(--cs-ui--select-bg-color);
    color: var(--cs-fonts--text-color);
  `,
};

ButtonNew.propTypes = {
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
  className: PropTypes.string,
  variant: PropTypes.oneOf(['primary', 'secondary']),
  type: PropTypes.oneOf(['button', 'submit']),
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
};

export default ButtonNew;