import * as React from "react";
import { Button, Link, Styled } from "@front10/base-elements";

interface Props {
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  link?: string;
  variant?: string;
}

export function CallToAction({
  variant = "primary",
  ...props
}: React.PropsWithChildren<Styled<Props>>) {
  if (props.onClick) {
    return (
      <Button sx={props.sx} variant={variant} onClick={props.onClick}>
        {props.children}
      </Button>
    );
  }

  return (
    <Link
      href={props.link || "#"}
      sx={props.sx}
      target="_parent"
      variant={variant}
    >
      {props.children}
    </Link>
  );
}