"use client";
import { motion, HTMLMotionProps } from "framer-motion";
import { ReactNode } from "react";

// Extendemos de HTMLMotionProps para heredar todos los atributos nativos de un botón (incluyendo disabled)
interface ButtonProps extends HTMLMotionProps<"button"> {
  children: ReactNode;
  variant?: "primary" | "outline" | "ocean";
  className?: string;
}

export const Button = ({ 
  children, 
  variant = "primary", 
  className = "", 
  disabled,
  ...props 
}: ButtonProps) => {
  
  const variants = {
    primary: "bg-navy text-white hover:bg-ocean disabled:bg-navy/50",
    outline: "border-2 border-navy text-navy hover:bg-navy hover:text-white disabled:opacity-50",
    ocean: "bg-ocean text-white hover:bg-sky disabled:bg-ocean/50",
  };

  return (
    <motion.button
      // Los botones en sistemas tipo Together AI tienen interacciones táctiles sutiles
      whileHover={disabled ? {} : { scale: 1.02 }}
      whileTap={disabled ? {} : { scale: 0.98 }}
      disabled={disabled}
      className={`
        px-8 py-4 rounded-full font-bold text-[14px] 
        transition-all duration-300 uppercase tracking-tight 
        disabled:cursor-not-allowed
        ${variants[variant]} 
        ${className}
      `}
      {...props}
    >
      {children}
    </motion.button>
  );
};