import React from 'react';
import { Box, Line } from 'folds';
import { useIsCallDockedRight } from './useDockedCall';
import { DockedCallContent } from './DockedCallContent';
import * as css from './CallOverlay.css';

/**
 * Component that renders the docked call panel in the layout flow (right side)
 * Only renders when there's an active call AND docking is enabled for right position
 */
export function DockedCallPanel() {
  const isCallDockedRight = useIsCallDockedRight();
  
  if (!isCallDockedRight) {
    return null;
  }
  
  return (
    <>
      <Line variant="Background" direction="Vertical" size="300" />
      <Box shrink="No" className={css.DockedCallPanelLayout}>
        <DockedCallContent />
      </Box>
    </>
  );
}
