import React from "react";
// eslint-disable-next-line camelcase
import { unstable_createElement } from "react-native-web";

import { ButtonPropsType } from "./Button";
import styles from "./styles";

const WebButton = (props: ButtonPropsType & { onClick: (e: any) => void }) => {
  const { href } = props;
  const element = href ? "div" : "button";
  return unstable_createElement(element, {
    ...props,
  });
};

const BaseButton = (props: ButtonPropsType) => {
  const { onPress, onPressIn, children, style, ...rest } = props;

  return (
    <WebButton
      style={[styles.reset, style]}
      onClick={onPressIn || onPress}
      {...rest}
    >
      {children}
    </WebButton>
  );
};

export default BaseButton;