import { ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';

// Constants
export const BIG_ACTION_BUTTON_GAP = 8; // px

interface BigActionButtonProps {
  icon: ReactNode;
  backgroundColor: string;
  onClick?: () => void;
  className?: string;
}

export const BigActionButton: React.FC<BigActionButtonProps> = ({
  icon,
  backgroundColor,
  onClick,
  className,
}) => {
  return (
    <button
      onClick={onClick}
      type='button'
      className={twMerge(
        'flex h-8 w-8 cursor-pointer items-center justify-center rounded-[12px] p-2 transition-colors',
        className
      )}
      style={{ backgroundColor }}
    >
      <div className='flex h-4 w-4 items-center justify-center'>{icon}</div>
    </button>
  );
};