import React from "react";

//#region src/Tabs/Tabs.types.d.ts

/**
 * Props for the Tabs component that creates a tabbed interface for organizing content.
 */
type TabsProps = {
  /**
   * Additional CSS classes to apply to the tabs container.
   * Use this to customize the overall appearance and layout of the tab component.
   */
  extraClassNames?: string;
  /**
   * ID of the tab that should be active when the component first loads.
   * Only used for uncontrolled tabs where the component manages its own active state.
   * Should match the `id` of one of the tabs in the `tabs` array.
   */
  defaultActiveTab?: string;
  /**
   * ID of the currently active tab for controlled component behavior.
   * When provided, the component becomes controlled and you must handle tab changes
   * via the `onTabSelect` callback to update this value.
   */
  activeTab?: string;
  /**
   * When true, enables smooth transitions when switching between tabs.
   * Provides visual animation effects during tab content changes.
   */
  transition?: boolean;
  /**
   * Callback function triggered when a user selects a different tab.
   * Receives the ID of the newly selected tab. Use this to handle tab changes
   * and update the `activeTab` prop in controlled mode.
   */
  onTabSelect?: (tabId: string) => void;
  /**
   * HTML ID attribute for the tabs container element.
   * Should be unique across the page for proper HTML semantics and accessibility.
   */
  id?: string;
  /**
   * Test ID attribute for the tabs container used in automated testing.
   * Applied to the main tabs component for test targeting and interaction.
   */
  testId?: string;
  /**
   * When true, makes the tab headers stretch to fill the full width of the container.
   * Each tab header will take equal width. When false, tabs size based on their content.
   */
  stretchTabs?: boolean;
  /**
   * Array of tab configurations that define the available tabs and their content.
   * Each tab represents a separate page or section within the tabbed interface.
   */
  tabs: {
    /**
     * Display text for the tab header.
     * This is what users see and click on to switch tabs.
     */
    label: string;
    /**
     * Unique identifier for this tab.
     * Used for tracking the active tab and in callbacks. Must be unique within the tabs array.
     */
    id: string;
    /**
     * React content to display when this tab is selected.
     * Can be any React element including complex layouts, forms, or other components.
     */
    content: React.JSX.Element;
    /**
     * Icon class name to display next to the tab label.
     * Typically uses FontAwesome classes for visual enhancement of the tab header.
     */
    icon?: string;
    /**
     * Test ID attribute for this specific tab header used in automated testing.
     * Helps identify and interact with individual tabs in test suites.
     */
    testId?: string;
    /**
     * Additional CSS classes to apply to this tab's header element.
     * Use this to customize individual tab appearance beyond global styling.
     */
    tabExtraClassNames?: string;
    /**
     * When true, disables this tab preventing user interaction.
     * Disabled tabs appear visually dimmed and cannot be selected.
     */
    disabled?: boolean;
    /**
     * Additional CSS classes to apply to this tab's content area.
     * Use this to customize the styling of the content when this tab is active.
     */
    tabContentExtraClassNames?: string;
    /**
     * Additional CSS classes to apply to this tab's label.
     * Use this to customize the styling of the label.
     */
    tabLabelExtraClassNames?: string;
  }[];
};
//#endregion
export { TabsProps };