import { Button } from '@8base/boost';
import React from 'react';

import { OverwritableType } from 'types';

// -- TYPES

interface IActionProps<T> {
  children: React.ReactNode;
  tagName: T;
  isSquared?: boolean;
}

// -- MAIN

function ActionButton<T extends React.ReactType = 'button'>({
  children,
  isSquared,
  tagName,
  ...domAttrs
}: OverwritableType<IActionProps<T>, T>) {
  const Tag: React.ReactType = tagName;

  return (
    <>
      {isSquared ? (
        <Button
          tagName={tagName}
          squared={true}
          color="neutral"
          variant="outlined"
          size="sm"
          {...domAttrs}
        >
          {children}
        </Button>
      ) : (
        <Tag {...domAttrs}>{children}</Tag>
      )}
    </>
  );
}

ActionButton.defaultProps = {
  tagName: 'button',
};

export default ActionButton;