import { ArrowRight } from 'lucide-react';

type CTAButtonProps = {
  variant?: 'primary' | 'secondary';
  href?: string;
  onClick?: () => void;
  children: React.ReactNode;
  fullWidth?: boolean;
  className?: string;
  target?: '_blank' | '_self';
  rel?: string;
  type?: 'button' | 'submit';
};

const CTAButton = ({
  variant = 'primary',
  href,
  onClick,
  children,
  fullWidth = false,
  className = '',
  target,
  rel,
  type = 'button',
}: CTAButtonProps) => {
  const base = `group inline-flex items-center gap-2 font-semibold rounded-full pl-6 pr-2 py-2 transition-all duration-300 active:scale-[0.97] ${fullWidth ? 'w-full justify-center' : ''}`;

  const variants = {
    primary: 'cta-gradient text-white',
    secondary: 'border-2 border-[#991437] text-[#991437] hover:bg-[#991437]/5',
  };

  const iconVariants = {
    primary: 'bg-white/20',
    secondary: 'bg-[#991437]/15',
  };

  const content = (
    <>
      <span className="text-sm whitespace-nowrap">{children}</span>
      <span className={`flex items-center justify-center w-8 h-8 rounded-full ${iconVariants[variant]} transition-transform duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105`}>
        <ArrowRight className="w-3.5 h-3.5" />
      </span>
    </>
  );

  if (href) {
    return (
      <a href={href} target={target} rel={rel} className={`${base} ${variants[variant]} ${className}`}>
        {content}
      </a>
    );
  }

  return (
    <button type={type} onClick={onClick} className={`${base} ${variants[variant]} ${className}`}>
      {content}
    </button>
  );
};

export default CTAButton;