import { ReactNode } from 'react';

interface ButtonProps {
  children: ReactNode;
  icon?: JSX.Element;
  color?: 'primary' | 'secondary';
  width?: 'fit' | 'full';
  disabled?: boolean;
  className?: string;
  onClick?: () => void;
}

export function Button({
  children,
  color = 'primary',
  icon,
  width = 'fit',
  disabled = false,
  className,
  onClick,
}: ButtonProps) {
  return (
    <button
      disabled={disabled}
      onClick={onClick}
      className={`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]'
          : 'outline-none')
      } ${
        icon ? 'pr-4' : ''
      } flex gap-1 items-center overflow-hidden w-${width} ${className} justify-between`}
    >
      <div className="group-hover:opacity-10 absolute top-0 left-0 w-full h-full bg-black opacity-0 transition-opacity" />
      <span className={'relative font-medium' + (icon ? '' : ' m-auto')}>
        {children}
      </span>
      <div className="relative">{icon}</div>
    </button>
  );
}
