import React from 'react';
import styled from 'styled-components';
export const CreateButton = ({ onclick, svg, title, appearance }) => {
  return /*#__PURE__*/ React.createElement(
    PrimaryBtn,
    {
      appearance: appearance,
      onClick: onclick,
    },
    /*#__PURE__*/ React.createElement(
      'svg',
      null,
      /*#__PURE__*/ React.createElement('use', {
        href: `/images/icons.svg#${svg}`,
      })
    ),
    /*#__PURE__*/ React.createElement('span', null, title)
  );
};
export const ChildCreateButton = ({ onclick, svg, title, appearance }) => {
  return /*#__PURE__*/ React.createElement(
    PryBtn,
    {
      appearance: appearance,
      onClick: onclick,
    },
    /*#__PURE__*/ React.createElement(
      'svg',
      null,
      /*#__PURE__*/ React.createElement('use', {
        href: `/images/icons.svg#${svg}`,
      })
    ),
    /*#__PURE__*/ React.createElement('span', null, title)
  );
};
const PrimaryBtn = styled.button`
  background: ${props => (props.appearance ? props.appearance : 'white')};
  border: ${props => (props.appearance ? '' : '2px dashed #E8EDFF')};
  padding: 0.8rem;
  color: var(--co-primary);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  height: 248px;
  ${''}
  /* min-width: 206px; */
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  svg {
    width: 40px;
    height: 40px;
    color: var(--co-primary);
  }

  span {
    font-family: var(--ff-sbold);
    color: #0a1045;
    font-weight: 600;
    font-size: 18px;
    line-height: 29px;
    margin-top: 2rem;
  }
  &:hover {
    box-shadow: 0px 10px 70px rgba(224, 228, 237, 0.7);
  }
`;
const PryBtn = styled.button`
  background: ${props => (props.appearance ? props.appearance : 'white')};
  border: ${props =>
    props.appearance ? '2px dashed #E8EDFF' : '2px dashed #E8EDFF'};
  padding: 0.8rem;
  color: var(--co-primary);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  svg {
    width: 40px;
    height: 40px;
    color: var(--co-primary);
  }

  span {
    font-family: var(--ff-sbold);
    color: #0a1045;
    font-weight: 600;
    font-size: 18px;
    line-height: 29px;
    margin-top: 2rem;
  }
  &:hover {
    box-shadow: 0px 10px 70px rgba(224, 228, 237, 0.7);
  }
`;
