Tab Configuration

/**
 * Configuration object for individual tab items
 * Extends TabPaneProps but excludes the 'tab' property
 */
interface Tab extends Omit<TabPaneProps, 'tab'> {
  /** Unique identifier for the tab (required) */
  key: string;
  /** Display content for the tab label (can be text, JSX, or any React node) */
  label: React.ReactNode;
  /** Content to display in the tab panel when this tab is active */
  children?: React.ReactNode;
  /** Whether the tab is disabled and cannot be activated */
  disabled?: boolean;
  /** Whether the tab can be closed (shows close button) */
  closable?: boolean;
  /** Custom icon to display before the tab label */
  icon?: React.ReactNode;
  /** Custom close icon (overrides default close button) */
  closeIcon?: React.ReactNode;
  /** CSS class name for this specific tab */
  className?: string;
  /** Inline styles for this specific tab */
  style?: React.CSSProperties;
  /** Force render the tab panel even when inactive */
  forceRender?: boolean;
}

/**
 * Extended properties for tab panes (internal use)
 */
interface TabPaneProps {
  tab?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  disabled?: boolean;
  children?: React.ReactNode;
  forceRender?: boolean;
  closable?: boolean;
  closeIcon?: React.ReactNode;
  icon?: React.ReactNode;
  
  // Internal properties set by TabPanelList
  prefixCls?: string;
  tabKey?: string;
  id?: string;
  animated?: boolean;
  active?: boolean;  
  destroyInactiveTabPane?: boolean;
}

import Tabs from "rc-tabs";
import { HomeIcon, SettingsIcon, CloseIcon } from "./icons";

// Basic tab configuration
const basicTabs = [
  {
    key: '1',
    label: 'Home',
    children: <div>Welcome to the home page</div>,
  },
  {
    key: '2', 
    label: 'About',
    children: <div>Learn more about us</div>,
  },
];

// Advanced tab configuration with icons and styling
const advancedTabs = [
  {
    key: 'home',
    label: 'Home',
    icon: <HomeIcon />,
    children: <HomePage />,
    className: 'home-tab',
  },
  {
    key: 'settings',
    label: 'Settings',
    icon: <SettingsIcon />,
    children: <SettingsPage />,
    disabled: false,
  },
  {
    key: 'temp',
    label: 'Temporary Tab',
    children: <TempContent />,
    closable: true,
    closeIcon: <CloseIcon />,
  },
];

// Complex tab with JSX labels
const complexTabs = [
  {
    key: 'dashboard',
    label: (
      <span>
        <DashboardIcon style={{ marginRight: 8 }} />
        Dashboard
        <Badge count={5} style={{ marginLeft: 8 }} />
      </span>
    ),
    children: <DashboardContent />,
    forceRender: true, // Always keep rendered for performance
  },
];

/**
 * Content rendering options for tab panels
 */
interface ContentOptions {
  /** Force render the tab panel even when inactive (keeps DOM mounted) */
  forceRender?: boolean;
  /** Allow tab pane destruction when parent destroyInactiveTabPane is true */
  destroyInactiveTabPane?: boolean;
}

// Lazy rendering (default) - content only rendered when tab becomes active
const lazyTabs = [
  {
    key: 'heavy',
    label: 'Heavy Content',
    children: <ExpensiveComponent />, // Only rendered when tab is active
  },
];

// Force render - content always rendered and kept in DOM
const forceRenderTabs = [
  {
    key: 'always-active',
    label: 'Always Rendered',
    children: <CriticalComponent />,
    forceRender: true, // Component stays mounted
  },
];

// Destroy inactive - content is destroyed when tab becomes inactive
function TabsWithDestruction() {
  return (
    <Tabs
      destroyInactiveTabPane={true} // Global setting
      items={[
        {
          key: 'temp',
          label: 'Temporary',
          children: <TempComponent />, // Destroyed when switching tabs
        },
      ]}
    />
  );
}

/**
 * Styling configuration for individual tabs
 */
interface TabStyling {
  /** CSS class name applied to the tab button */
  className?: string;
  /** Inline styles applied to the tab button */
  style?: React.CSSProperties;
  /** Icon displayed before the tab label */
  icon?: React.ReactNode;
  /** Custom close icon for closable tabs */
  closeIcon?: React.ReactNode;
}

// Custom styled tabs
const styledTabs = [
  {
    key: 'primary',
    label: 'Primary Tab',
    className: 'primary-tab',
    style: { 
      color: '#1890ff',
      fontWeight: 'bold',
    },
    children: <PrimaryContent />,
  },
  {
    key: 'warning',
    label: 'Warning Tab',
    className: 'warning-tab',
    style: { 
      color: '#faad14',
    },
    icon: <WarningIcon />,
    children: <WarningContent />,
  },
];

// Tab with custom close icon
const closableTab = {
  key: 'closable',
  label: 'Closable Tab',
  closable: true,
  closeIcon: <CustomCloseIcon style={{ color: 'red' }} />,
  children: <ClosableContent />,
};

/**
 * Interactive state configuration for tabs
 */
interface TabInteractivity {
  /** Whether the tab is disabled and cannot be activated */
  disabled?: boolean;
  /** Whether the tab can be closed by the user */
  closable?: boolean;
}

// Disabled tab
const disabledTab = {
  key: 'disabled',
  label: 'Disabled Tab',
  children: <div>This content is not accessible</div>,
  disabled: true, // Tab cannot be clicked or activated
};

// Conditionally closable tabs
function DynamicTabs() {
  const [userRole, setUserRole] = useState('user');
  
  const tabs = [
    {
      key: 'public',
      label: 'Public',
      children: <PublicContent />,
      closable: false, // Always present
    },
    {
      key: 'admin',
      label: 'Admin Panel',
      children: <AdminContent />,
      closable: userRole === 'admin', // Only closable for admins
      disabled: userRole !== 'admin', // Only accessible to admins
    },
  ];
  
  return <Tabs items={tabs} />;
}