import { Button } from "@ax/components";

import styled from "styled-components";

const Wrapper = styled.div``;

const TextWrapper = styled.div<{ margin?: boolean }>`
  ${(p) => p.theme.textStyle.uiM};
  color: ${(p) => p.theme.colors.textHighEmphasis};
  margin-top: ${(p) => (p.margin ? p.theme.spacing.m : 0)};
`;

const ButtonWrapper = styled.div`
  display: flex;
  justify-content: center;
  margin-top: ${(p) => p.theme.spacing.xs};
`;

const StyledButton = styled((props) => <Button {...props} />)`
  width: 100%;
  max-width: 286px;
`;

export { Wrapper, TextWrapper, ButtonWrapper, StyledButton };
