import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";

export interface TabPanelProps extends StyledProps {
  /**
   * 选项卡 ID
   */
  id: string;

  /**
   * 选项卡内容
   */
  children?: React.ReactNode;

  /**
   * 未激活时是否强制渲染
   * @default false
   */
  forceRender?: boolean;
}

/**
 * TabPanel 应该用在 Tabs 内部，如果单独使用，会直接渲染其 children
 */
export const TabPanel = React.forwardRef(function TabPanel(
  { children, id, forceRender, className, style = {}, ...props }: TabPanelProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-tabs__tabpanel`, className)}
      style={{ ...style, flexShrink: 0 }}
      {...props}
    >
      {children}
    </div>
  );
});

TabPanel.displayName = "TabPanel";