import { ReactNode } from 'react';

interface ButtonProps {
  children: ReactNode;
  icon?: JSX.Element;
  color?: 'primary' | 'secondary';
  width?: 'fit' | 'full';
  disabled?: boolean;
  className?: string;
  onClick?: () => void;
  /** Native link (mailto:, tel:, https://). More reliable than JS navigation on some mobile WebViews. */
  href?: string;
}

export function Button({
  children,
  color = 'primary',
  icon,
  width = 'fit',
  disabled = false,
  className,
  onClick,
  href,
}: ButtonProps) {
  const sharedClassName = `group relative px-6 py-2 rounded-full min-w-fit ${
    (color === 'primary'
      ? 'bg-gradient-to-r from-[#798FFF] to-[#D375FF]'
      : '') ||
    (color === 'secondary' ? 'outline outline-1 outline-[#3D425C]' : '')
  } ${
    icon ? 'pr-4' : ''
  } flex gap-1 items-center overflow-hidden w-${width} ${className} justify-between`;

  const inner = (
    <>
      <span className="group-hover:opacity-10 opacity-0 bg-black transition-opacity absolute top-0 left-0 w-full h-full"></span>
      <span className={'relative font-medium' + (icon ? '' : ' m-auto')}>
        {children}
      </span>
      <span className="relative">{icon}</span>
    </>
  );

  if (href) {
    return (
      <a
        href={disabled ? undefined : href}
        className={sharedClassName + (disabled ? ' pointer-events-none opacity-50' : '')}
        aria-disabled={disabled || undefined}
        onClick={disabled ? (e) => e.preventDefault() : onClick}
      >
        {inner}
      </a>
    );
  }

  return (
    <button
      disabled={disabled}
      onClick={onClick}
      className={sharedClassName}
    >
      {inner}
    </button>
  );
}
