import * as stylex from '@stylexjs/stylex';

import type { ClickableProps } from './types';

import { clickableStyles } from './styles';

export const Clickable = ({
  onClick,
  isDisabled,
  children,
  style,
  testId,
  role = 'button',
}: ClickableProps) => {
  return (
    <div
      role={role}
      aria-disabled={isDisabled}
      data-testid={testId}
      onClick={(e) => {
        if (isDisabled) {
          e.preventDefault();
          return;
        }

        if (onClick) {
          e.preventDefault();
          e.stopPropagation();
          onClick();
        }
      }}
      {...stylex.props(clickableStyles.base, style)}
    >
      {children}
    </div>
  );
};