import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
/**
 * Button descriptor used by `ControlButtonsComponent`.
 *
 * @interface Button
 * @property {string} [name] Optional label displayed beneath the icon.
 * @property {string} [icon] Default FontAwesome5 icon name when inactive.
 * @property {string} [alternateIcon] Icon displayed when the button is `active`.
 * @property {() => void} [onPress] Handler invoked when the button is pressed.
 * @property {{ default?: string; pressed?: string }} [backgroundColor] Background colors for idle and pressed states.
 * @property {boolean} [active=false] Enables alternate icon or color states.
 * @property {JSX.Element} [alternateIconComponent] Custom component rendered when active.
 * @property {JSX.Element} [iconComponent] Custom component rendered when inactive.
 * @property {JSX.Element} [customComponent] Full override replacing icon and label.
 * @property {string} [color] Default text/icon color for the button.
 * @property {string} [activeColor] Icon color when the button is active.
 * @property {string} [inActiveColor] Icon color when the button is inactive.
 * @property {boolean} [disabled=false] Disables press interactions.
 * @property {boolean} [show=true] Toggle to hide the button entirely when false.
 */
export interface Button {
    name?: string;
    icon?: string;
    alternateIcon?: string;
    onPress?: () => void;
    backgroundColor?: {
        default?: string;
        pressed?: string;
    };
    active?: boolean;
    alternateIconComponent?: JSX.Element;
    iconComponent?: JSX.Element;
    customComponent?: JSX.Element;
    color?: string;
    activeColor?: string;
    inActiveColor?: string;
    disabled?: boolean;
    show?: boolean;
}
/**
 * Options for rendering `ControlButtonsComponent`.
 *
 * @interface ControlButtonsComponentOptions
 *
 * **Buttons & Behaviour:**
 * @property {Button[]} buttons Collection of button descriptors rendered in order.
 * @property {boolean} [vertical=false] Arranges icon+label vertically within each button when true.
 *
 * **Appearance:**
 * @property {string} [buttonColor] Default color applied to button labels/icons when no per-button color is provided.
 * @property {{ default?: string; pressed?: string }} [buttonBackgroundColor] Shared background colors applied to buttons.
 * @property {StyleProp<ViewStyle>} [buttonsContainerStyle] Additional styles for the internal buttons wrapper.
 * @property {StyleProp<ViewStyle>} [style] Extra styles for the outer container.
 * @property {JSX.Element} [alternateIconComponent] Shared component rendered when buttons are active.
 * @property {JSX.Element} [iconComponent] Shared component rendered when buttons are inactive.
 *
 * **Layout:**
 * @property {'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'} [alignment='flex-start'] Distribution of buttons within the container.
 *
 * **Advanced Render Overrides:**
 * @property {(options: { defaultContent: JSX.Element; dimensions: { width: number; height: number } }) => JSX.Element} [renderContent]
 * Wrap or replace the default button rendering while receiving basic layout dimensions.
 * @property {(options: { defaultContainer: JSX.Element; dimensions: { width: number; height: number } }) => JSX.Element} [renderContainer]
 * Override the top-level container element to integrate with custom shells.
 */
export interface ControlButtonsComponentOptions {
    buttons: Button[];
    buttonColor?: string;
    buttonBackgroundColor?: {
        default?: string;
        pressed?: string;
    };
    alignment?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
    vertical?: boolean;
    buttonsContainerStyle?: StyleProp<ViewStyle>;
    alternateIconComponent?: JSX.Element;
    iconComponent?: JSX.Element;
    style?: StyleProp<ViewStyle>;
    renderContent?: (options: {
        defaultContent: JSX.Element;
        dimensions: {
            width: number;
            height: number;
        };
    }) => JSX.Element;
    renderContainer?: (options: {
        defaultContainer: JSX.Element;
        dimensions: {
            width: number;
            height: number;
        };
    }) => JSX.Element;
}
export type ControlButtonsComponentType = (options: ControlButtonsComponentOptions) => JSX.Element;
/**
 * Renders a customizable toolbar of meeting controls (mute, camera, share, etc.) with
 * flexible layout, shared icon overrides, and render hooks for advanced integrations.
 *
 * ### Key Features
 * - Align buttons using common flex alignments while preserving horizontal layout.
 * - Provide per-button or shared icon overrides, including React elements for animated states.
 * - Wrap the default content or container via `renderContent` and `renderContainer` hooks.
 *
 * ### Accessibility
 * - Each `Pressable` exposes an accessibility label derived from the button `name` or icon name.
 * - Disabled buttons lower opacity but remain rendered to avoid focus jumps.
 *
 * @example
 * ```tsx
 * <ControlButtonsComponent
 *   buttons={[
 *     { name: 'Mute', icon: 'microphone', alternateIcon: 'microphone-slash', active: isMuted, onPress: toggleMute },
 *     { name: 'Video', icon: 'video', onPress: toggleVideo },
 *   ]}
 *   buttonColor="#f1f5f9"
 *   alignment="space-between"
 *   renderContent={({ defaultContent }) => <View testID="controls-wrapper">{defaultContent}</View>}
 * />
 * ```
 */
declare const ControlButtonsComponent: React.FC<ControlButtonsComponentOptions>;
export default ControlButtonsComponent;