import * as React from 'react';
import { ArrowRight } from 'lucide-react';
import { motion } from 'framer-motion';
import Link from 'next/link';

interface ButtonProps {
  href: string;
  children: React.ReactNode;
  variant?: 'primary' | 'outline';
  className?: string;
  showArrow?: boolean;
}

export const Button: React.FC<ButtonProps> = ({
  href,
  children,
  variant = 'primary',
  className = "",
  showArrow = true
}) => {
  const baseStyles = "inline-flex items-center gap-4 rounded-full font-bold uppercase tracking-widest transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group";
  
  const variants = {
    primary: "px-10 py-5 bg-slate-900 text-white hover:bg-slate-800 hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-900/20 text-sm",
    outline: "px-8 py-4 border border-slate-200 bg-white text-slate-900 hover:border-slate-400 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 text-sm"
  };

  const content = (
    <>
      {children}
      {showArrow && <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />}
    </>
  );

  if (href.startsWith('#')) {
    return (
      <a href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
        {content}
      </a>
    );
  }

  return (
    <Link href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
      {content}
    </Link>
  );
};

export const MotionButton: React.FC<ButtonProps> = ({
  href,
  children,
  variant = 'primary',
  className = "",
  showArrow = true
}) => {
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
    >
      <Button href={href} variant={variant} className={className} showArrow={showArrow}>
        {children}
      </Button>
    </motion.div>
  );
};