import classNames from "classnames";
import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
import React from "react";

type Props = {
  children: React.ReactNode;
  variant?: StyleColorVariants;
  href?: string;
  className?: string;
  onClick?: (
    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>
  ) => void;
};

const textColorsMap: StyleColorVariantsMap<string> = {
  blue: "text-blue-500",
  emerald: "text-emerald-500",
  gray: "text-gray-500",
  pink: "text-pink-500",
  red: "text-red-500",
  purple: "text-purple-500",
  yellow: "text-yellow-500",
  sky: "text-sky-500",
  "dark-coral": "text-dark-coral-500",
};

export default function TextAction({
  children,
  onClick,
  href,
  variant,
  className,
}: Props) {
  const Component = href ? "a" : "button";
  return (
    <Component
      href={href}
      onClick={onClick}
      className={classNames(
        variant ? textColorsMap[variant] : "",
        className,
        "hover:underline"
      )}
    >
      {children}
    </Component>
  );
}
