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

type Props = {
  href?: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "ghost" | "outline";
  size?: "sm" | "md" | "lg";
  className?: string;
  type?: "button" | "submit" | "reset";
  disabled?: boolean;
  target?: string;
  rel?: string;
};

export default function Button({
  href,
  onClick,
  children,
  variant = "primary",
  size = "md",
  className,
  type = "button",
  disabled = false,
  target,
  rel,
}: Props) {
  
  // 1. Base Styles: Focus on alignment, font-weight, and focus states
  const base =
    "inline-flex items-center justify-center font-semibold transition-all duration-200 ease-in-out " +
    "focus:outline-none focus:ring-2 focus:ring-cyan-500/40 focus:ring-offset-2 " +
    "disabled:opacity-60 disabled:pointer-events-none " +
    "active:scale-[0.98]"; // Subtle press effect

  // 2. Sizes: Essential for Header (sm) vs Hero (lg)
  const sizes = {
    sm: "text-xs px-4 py-2 rounded-lg gap-2",      // Compact (Header)
    md: "text-sm px-6 py-3 rounded-xl gap-2.5",    // Default (Cards)
    lg: "text-base sm:text-lg px-8 py-4 rounded-2xl gap-3", // Massive (Hero CTA)
  };

  // 3. Variants: Polished colors & shadows
  const styles = {
    primary:
      "bg-slate-900 text-white hover:bg-slate-800 " +
      "shadow-lg shadow-slate-900/20 hover:shadow-slate-900/30",
    
    secondary:
      "bg-white text-slate-700 border border-slate-200 " +
      "hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 " +
      "shadow-sm",
      
    outline:
      "bg-transparent text-slate-700 border border-slate-200 " +
      "hover:bg-slate-50 hover:text-slate-900",

    ghost:
      "bg-transparent text-slate-600 hover:bg-slate-100/50 hover:text-slate-900 border border-transparent",
  };

  const classes = clsx(base, sizes[size], styles[variant], className);

  if (href) {
    return (
      <Link href={href} className={classes} target={target} rel={rel}>
        {children}
      </Link>
    );
  }

  return (
    <button type={type} onClick={onClick} className={classes} disabled={disabled}>
      {children}
    </button>
  );
}