import React, { useRef, forwardRef } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import useMergeRefs from "../../../hooks/useMergeRefs";
import "./TabPanel.scss";

const TabPanel = forwardRef(({ className, id, children }, ref) => {
    const componentRef = useRef(null);
    const mergedRef = useMergeRefs({ refs: [ref, componentRef] });

    return (
    <div ref={mergedRef} className={cx("tab-panel--wrapper", className)} id={id} role="tabpanel">{children}</div>
  );
});

TabPanel.propTypes = {
    className: PropTypes.string,
    id: PropTypes.string
};
TabPanel.defaultProps = {
    className: "",
    id: ""
};

export default TabPanel;