import React, { AllHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

export interface BlockProps {
  /**
   * Input Ref .
   */
  ref?: React.Ref<HTMLDivElement>;

  /**
   * Html element that will be used as the main element.
   */

  html?:
    | "div"
    | "span"
    | "section"
    | "article"
    | "aside"
    | "header"
    | "footer"
    | "nav"
    | "main";
}

const Block: React.FC<
  BlockProps & AllHTMLAttributes<HTMLDivElement>
> = React.forwardRef((props, ref) => {
  const { title, className, children, html } = props;

  const elementProps = Object.assign({}, props);
  delete elementProps.html;
  delete elementProps.children;

  return React.createElement(
    html ? html : "div",
    {
      ...elementProps,
      className: `${twMerge(className)}`,
      "aria-label": title,
      alt: title,
      ref: ref,
    },
    children
  );
});

Block.displayName = "Block";

export default Block;
