import Link from "next/link";
import type { ButtonHTMLAttributes, ReactNode } from "react";
import styles from "./Button.module.css";

type Variant = "primaire" | "secondaire" | "accent" | "destructif";
type Size = "sm" | "md" | "lg";

interface CommonProps {
  variant?: Variant;
  size?: Size;
  children: ReactNode;
  className?: string;
  /** Icône affichée avant le texte (SVG 20x20 recommandé). */
  icone?: ReactNode;
  /** Icône affichée après le texte (ex: flèche), incompatible avec `icone`. */
  iconeDroite?: ReactNode;
}

interface ButtonAsButton extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  href?: undefined;
}

interface ButtonAsLink extends CommonProps {
  href: string;
}

type ButtonProps = ButtonAsButton | ButtonAsLink;

export default function Button({
  variant = "primaire",
  size = "md",
  children,
  className,
  icone,
  iconeDroite,
  href,
  ...rest
}: ButtonProps) {
  const classes = [styles.btn, styles[variant], styles[size], className]
    .filter(Boolean)
    .join(" ");

  const contenu = (
    <>
      {icone && <span className={styles.icone}>{icone}</span>}
      {children}
      {iconeDroite && <span className={styles.icone}>{iconeDroite}</span>}
    </>
  );

  if (href) {
    return (
      <Link href={href} className={classes}>
        {contenu}
      </Link>
    );
  }

  return (
    <button className={classes} {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}>
      {contenu}
    </button>
  );
}