"use client";

import { motion } from "framer-motion";
import Link from "next/link";

interface ButtonProps {
  children: React.ReactNode;
  href?: string;
  onClick?: () => void;
  variant?: "primary" | "secondary" | "coral" | "outline";
  size?: "sm" | "md" | "lg";
  className?: string;
  external?: boolean;
}

const variants = {
  primary: "bg-bosphorus text-white hover:bg-bosphorus/90 shadow-lg shadow-bosphorus/25",
  secondary: "bg-deep-nazar text-white hover:bg-deep-nazar/90",
  coral: "bg-coral-spritz text-white hover:bg-coral-spritz/90 shadow-lg shadow-coral-spritz/25",
  outline: "border-2 border-deep-nazar text-deep-nazar hover:bg-deep-nazar hover:text-white",
};

const sizes = {
  sm: "px-5 py-2.5 text-sm",
  md: "px-7 py-3.5 text-base",
  lg: "px-9 py-4 text-lg",
};

export function Button({
  children,
  href,
  onClick,
  variant = "primary",
  size = "md",
  className = "",
  external = false,
}: ButtonProps) {
  const baseClasses = `inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 ${variants[variant]} ${sizes[size]} ${className}`;

  const motionProps = {
    whileHover: { scale: 1.03, y: -1 },
    whileTap: { scale: 0.98 },
    transition: { type: "spring" as const, stiffness: 400, damping: 17 },
  };

  if (href) {
    if (external) {
      return (
        <motion.a
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          className={baseClasses}
          {...motionProps}
        >
          {children}
        </motion.a>
      );
    }
    return (
      <Link href={href} className="inline-block">
        <motion.span className={baseClasses} {...motionProps}>
          {children}
        </motion.span>
      </Link>
    );
  }

  return (
    <motion.button onClick={onClick} className={baseClasses} {...motionProps}>
      {children}
    </motion.button>
  );
}