import React from 'react';
import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'folds';
import { useAtom } from 'jotai';
import * as css from './styles.css';
import { callChatAtom } from '../../state/callEmbed';
export function ControlDivider() {
return (
);
}
type MicrophoneButtonProps = {
enabled: boolean;
onToggle: () => void;
};
export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
return (
{enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}
}
>
{(anchorRef) => (
onToggle()}
outlined
>
)}
);
}
type SoundButtonProps = {
enabled: boolean;
onToggle: () => void;
};
export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
return (
{enabled ? 'Turn Off Sound' : 'Turn On Sound'}
}
>
{(anchorRef) => (
onToggle()}
outlined
>
)}
);
}
type VideoButtonProps = {
enabled: boolean;
onToggle: () => void;
};
export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
return (
{enabled ? 'Stop Camera' : 'Start Camera'}
}
>
{(anchorRef) => (
onToggle()}
outlined
>
)}
);
}
export function ChatButton() {
const [chat, setChat] = useAtom(callChatAtom);
return (
{chat ? 'Close Chat' : 'Open Chat'}
}
>
{(anchorRef) => (
setChat(!chat)}
outlined
>
)}
);
}