import React from "react";
import styled from "styled-components";
import colors from "@theme/colors";

interface HeroPrimaryButtonsProps {
  row?: boolean;
}

const Buttons = styled.div<HeroPrimaryButtonsProps>`
  ${({ row }) => (row ? "width: 100%;" : "")}

  display: flex;
  flex-flow: ${({ row }) => (row ? "row" : "column")} wrap;

  a {
    display: contents;
    text-decoration: none;
  }

  button {
    margin: 0.5rem;

    /* stylelint-disable function-name-case */
    flex: 1 0 calc(100% / ${({ children }) => React.Children.count(children)} - 2 * 0.5rem);

    /* stylelint-enable function-name-case */
    color: ${colors.blue1};
    background-color: transparent;
    padding: 0.8rem 2rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid ${colors.lightTurquoise};

    &:hover {
      cursor: pointer;
      color: ${colors.white};
    }

    &:active,
    &:focus {
      outline: none;
    }
  }
`;

export default Buttons;
