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

export const PrimaryButton = ({
  text,
  onclick,
  type,
  disabled,
  loading,
  className,
  ...props
}) => {
  return (
    <PrimaryBtn
      disabled={disabled}
      type={type}
      onClick={onclick}
      className={`btn ${className}`}
      {...props}
    >
      {loading ? 'Loading...' : text}
    </PrimaryBtn>
  );
};

export const NofillButton = ({ title, onclick, type, loading }) => {
  return (
    <NoFillBtn type={type} onClick={onclick} className="btn">
      {loading ? 'Loading' : title}
    </NoFillBtn>
  );
};

export const NofillButtonsm = ({ title, onclick }) => {
  return (
    <NoFillBtnsm onClick={onclick} className="btn">
      {title}
    </NoFillBtnsm>
  );
};
export const DeleteButton = ({ title, onclick }) => {
  return (
    <DelBtn onClick={onclick} className="btn">
      {title}
    </DelBtn>
  );
};
export const DropButton = ({ onclick, svg, title }) => {
  return (
    <DropBtn onClick={onclick} className="drop-btn">
      <span>{title}</span>
      <svg>
        <use href={`/images/icons.svg#${svg}`}></use>
      </svg>
    </DropBtn>
  );
};

export const TextButton = ({ title, onclick, className }) => {
  return (
    <TextBtn onClick={onclick} className={`btn alt ${className}`}>
      {title}
    </TextBtn>
  );
};

export const SettingsTabButton = ({ title, onclick, className }) => {
  return (
    <TextBtn onClick={() => onclick()} className={`btn alt ${className}`}>
      {title}
    </TextBtn>
  );
};

export const WhiteButton = ({ onclick, svg, title, className }) => {
  return (
    <WhiteBtn onClick={onclick} className={`btn ${className}`}>
      {title}
      {svg}
    </WhiteBtn>
  );
};

const PrimaryBtn = styled.button`
  background-color: var(--co-primary);
  color: #ffffff;
  margin-left: 20px;
  cursor: pointer;
  text-transform: none;
  &:first-letter {
    text-transform: uppercase;
  }
`;
const WhiteBtn = styled.button`
  background-color: #fff;
  color: var(--co-primary);
`;

const NoFillBtn = styled.button`
  background: rgba(97, 103, 124, 0.2);
  color: var(--co-body);
`;
const NoFillBtnsm = styled.button`
  background: rgba(97, 103, 124, 0.2);
  color: var(--co-body);
  padding: 1rem 3rem;
`;
const DelBtn = styled.button`
  background-color: var(--co-error);
  color: #ffffff;
  padding: 1rem 3.6rem;
`;
const DropBtn = styled.button`
  background-color: transparent;
  padding: 0.8rem;
  color: var(--co-body);
  font-family: var(--ff-regular);
  span {
    font-size: 1.4rem;
  }
  svg {
    width: 5px;
    height: 10px;
  }
`;
const TextBtn = styled.button`
  background: transparent;
  color: #c5c9da;
  font-family: var(--ff-medium);
  padding: 2rem 1.4rem;
  font-size: 1.6rem;
  &.alt {
    &:first-child {
      padding-left: 0;
    }
  }
  &:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    bottom: 1.3rem;
    left: 50%;
    transform: translateX(-50%);
  }
  &.active {
    color: var(--co-primary);
    position: relative;
    &:before {
      background: var(--co-primary);
    }
  }
`;
