import clsx from "clsx";
import type { FC } from "react";
import { Button, type ButtonProps } from "../Button";
import styles from "./FancyButton.module.css";

interface FancyButtonProps extends Omit<ButtonProps, "color"> {
  color: "light" | "red" | "dark";
}

export const FancyButton: FC<FancyButtonProps> = ({
  className,
  color = "light",
  children,
  ...props
}) => (
  <Button
    className={clsx([styles.button, styles[`${color}Button`], className])}
    {...props}
  >
    <img
      className={styles.image}
      src={
        color === "red"
          ? "https://media.dndbeyond.com/images/campaigns/redButtonBorder.png"
          : "https://media.dndbeyond.com/images/campaigns/goldButtonBorder.png"
      }
      alt=""
    />
    {children}
  </Button>
);
