import React, { forwardRef } from "react";
import cn from "classnames";

export interface ITabPaneProps {
  isActive?: boolean;
  role?: string;
  as?: React.ElementType;
  className?: string;
}

const TabPane: React.FC<ITabPaneProps> = forwardRef(
  ({ isActive, className, children, as: Component = "div", role, ...props }, ref) => {
    return (
      <Component
        {...props}
        ref={ref}
        role={role}
        className={cn("tab-pane", { "show active": isActive, fade: !isActive }, className)}
      >
        {children}
      </Component>
    );
  }
);

TabPane.displayName = "TabPane";

export default TabPane;