import Link from "next/link";
import type { ReactNode, ButtonHTMLAttributes, CSSProperties } from "react";

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary";
  icon?: ReactNode;
  href?: string;
  className?: string;
  style?: CSSProperties;
  type?: "button" | "submit";
  children?: ReactNode;
  iconPosition?: "left" | "right";
  shape?: "default" | "round";
};

export default function Button({
  variant = "primary",
  icon,
  href,
  onClick,
  className = "",
  style,
  type = "button",
  children,
  iconPosition = "left",
  shape = "default",
}: ButtonProps) {
  const buttonClass = `
    btn 
    ${variant === "primary" ? "btn-primary" : "btn-secondary"} 
    ${shape === "round" ? "btn-round" : ""}
    ${className}
  `.trim();

  const hasLabel = children !== undefined && children !== null && children !== false;

  // Inhalt abhängig von der Icon-Position
  const content =
    iconPosition === "right" ? (
      <div className="btn-content">
        {hasLabel && <span className="btn-label">{children}</span>}
        {icon && <span className="btn-icon">{icon}</span>}
      </div>
    ) : (
      <div className="btn-content">
        {icon && <span className="btn-icon">{icon}</span>}
        {hasLabel && <span className="btn-label">{children}</span>}
      </div>
    );

  if (href) {
    return (
      <Link href={href}>
        <button type={type} className={buttonClass} style={style}>
          {content}
        </button>
      </Link>
    );
  }

  return (
    <button type={type} className={buttonClass} onClick={onClick} style={style}>
      {content}
    </button>
  );
}