import type { ButtonProps } from "./ButtonProps.type";

import clsx from "clsx";
import Link from "next/link";

import styles from "./Button.module.scss";

export default function Button<RouteType extends string>({
  icon: Icon,
  iconStart: IconStart,
  iconEnd: IconEnd,
  variant,
  size,
  fill,
  style,
  className,
  children,
  ...restProps
}: ButtonProps<RouteType>) {
  const content = Icon ? (
    <Icon className={styles["button__icon"]} />
  ) : (
    <>
      {IconStart && <IconStart className={styles["button__icon"]} />}
      {children}
      {IconEnd && <IconEnd className={styles["button__icon"]} />}
    </>
  );

  const customClassName = clsx(
    styles["button"],
    Icon && styles["button--type--icon"],
    variant && styles[`button--variant--${variant}`],
    size && styles[`button--size--${size}`],
    fill && styles["button--fill"],
    style && styles[`button--style--${style}`],
    className,
  );

  return "href" in restProps ? (
    <Link {...restProps} className={customClassName}>
      {content}
    </Link>
  ) : (
    <button {...restProps} className={customClassName}>
      {content}
    </button>
  );
}