import { createContext, useContext } from 'react';
import type { LucideIcon } from 'lucide-react';

export interface MeetingBarPanel {
    key: string;
    label: string;
    icon: LucideIcon;
    testId: string;
    /** Unread messages to show on the button; absent when none can be read. */
    count?: number;
}

export interface MeetingBarPanels {
    panels: MeetingBarPanel[];
    activeKey: string | null;
    onSelect: (key: string) => void;
}

// At the narrow rung the panel toggles sit in the call bar, as the phone frame draws them.
export const MeetingBarPanelsContext = createContext<MeetingBarPanels | null>(null);

export const useMeetingBarPanels = () => useContext(MeetingBarPanelsContext);