"use client";

import clsx from "clsx";
import type {
  AllHTMLAttributes,
  ButtonHTMLAttributes,
  FC,
  ReactNode,
} from "react";
import styles from "./styles/Button.module.css";
import sizeStyles from "./styles/ButtonSizes.module.css";
import variantStyles from "./styles/ButtonVariants.module.css";

export interface ButtonProps
  extends Omit<
      AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,
      "size" | "type"
    >,
    Pick<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
  children?: ReactNode;
  className?: string;
  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error";
  variant?: "solid" | "outline" | "text" | "tool";
  size?: "x-small" | "smaller" | "small" | "medium" | "large" | "x-large";
  isDiv?: boolean;
}

export const Button: FC<ButtonProps> = ({
  className,
  color = "primary",
  variant = "solid",
  size = "medium",
  isDiv,
  ...props
}) => {
  const Element = props.href ? "a" : isDiv ? "div" : "button";

  return (
    <Element
      className={clsx([
        styles.button,
        color && variantStyles[color],
        variant && variantStyles[variant],
        size && sizeStyles[size],
        className,
      ])}
      aria-disabled={props.disabled}
      {...props}
    />
  );
};
