helix-engage/src/components/call-desk/call-control-strip.tsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faMicrophone, faMicrophoneSlash,
    faPause, faPlay, faPhoneHangup,
} from '@fortawesome/pro-duotone-svg-icons';
import { useSip } from '@/providers/sip-provider';
import { cx } from '@/utils/cx';

const formatDuration = (seconds: number): string => {
    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
    const s = (seconds % 60).toString().padStart(2, '0');
    return `${m}:${s}`;
};

export const CallControlStrip = () => {
    const { callState, callDuration, isMuted, isOnHold, toggleMute, toggleHold, hangup } = useSip();

    if (callState !== 'active' && callState !== 'ringing-out') return null;

    return (
        <div className="flex items-center justify-between rounded-lg bg-success-secondary px-3 py-2">
            <div className="flex items-center gap-2">
                <span className="relative flex size-2">
                    <span className="absolute inline-flex size-full animate-ping rounded-full bg-success-solid opacity-75" />
                    <span className="relative inline-flex size-2 rounded-full bg-success-solid" />
                </span>
                <span className="text-xs font-semibold text-success-primary">Live Call</span>
                <span className="text-xs font-bold tabular-nums text-success-primary">{formatDuration(callDuration)}</span>
            </div>
            <div className="flex items-center gap-1">
                <button
                    onClick={toggleMute}
                    title={isMuted ? 'Unmute' : 'Mute'}
                    className={cx(
                        'flex size-7 items-center justify-center rounded-md transition duration-100 ease-linear',
                        isMuted ? 'bg-error-solid text-white' : 'bg-primary text-fg-quaternary hover:text-fg-secondary',
                    )}
                >
                    <FontAwesomeIcon icon={isMuted ? faMicrophoneSlash : faMicrophone} className="size-3" />
                </button>
                <button
                    onClick={toggleHold}
                    title={isOnHold ? 'Resume' : 'Hold'}
                    className={cx(
                        'flex size-7 items-center justify-center rounded-md transition duration-100 ease-linear',
                        isOnHold ? 'bg-warning-solid text-white' : 'bg-primary text-fg-quaternary hover:text-fg-secondary',
                    )}
                >
                    <FontAwesomeIcon icon={isOnHold ? faPlay : faPause} className="size-3" />
                </button>
                <button
                    onClick={hangup}
                    title="End Call"
                    className="flex size-7 items-center justify-center rounded-md bg-error-solid text-white hover:bg-error-solid_hover transition duration-100 ease-linear"
                >
                    <FontAwesomeIcon icon={faPhoneHangup} className="size-3" />
                </button>
            </div>
        </div>
    );
};