import { AllHTMLAttributes, Ref, FC, forwardRef, createElement } from 'react';
import { twMerge } from 'tailwind-merge';

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

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

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

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

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

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

Block.displayName = 'Block';

export default Block;
