import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';

const OutlineButton = ({
  onClick,
  label = '',
  isDisabled = false,
  children,
  hasText = false,
  invert = false,
  heightPx,
  className,
}: {
  onClick: () => void;
  children: any;
  label?: string;
  isDisabled?: boolean;
  hasText?: boolean;
  invert?: boolean;
  heightPx?: number;
  className?: string;
}) => {
  return (
    <button
      className={twMerge(
        clsx(
          'font-sans',
          heightPx ? `h-[${heightPx}px]` : 'h-10',
          'disabled:cursor-not-allowed disabled:opacity-30 disabled:brightness-30 disabled:hover:bg-transparent',
          hasText ? 'w-auto' : 'w-10',
          'flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border px-4 whitespace-nowrap select-none',
          invert
            ? 'border-border-primary bg-foreground-primary text-background-primary'
            : 'border-border-primary bg-transparent text-foreground-primary hover:bg-background-primary/10'
        ),
        className || ''
      )}
      onClick={onClick}
      aria-label={label}
      disabled={isDisabled}
    >
      {children}
    </button>
  );
};

export default OutlineButton;