import React from 'react';
import {StyleSheet, ViewStyle, StyleProp} from 'react-native';
import {COLORS} from '@shared/colors';

import CallVideoViewNativeComponent from './CallVideoViewNativeComponent';

interface CallVideoViewProps {
  sessionId: string;
  trackType?: 'videoTrack' | 'screenShareTrack';
  isMirrored?: boolean;
  scalingMode?: 'fill' | 'fit';
  style?: StyleProp<ViewStyle>;
}

export function CallVideoView({
  sessionId,
  trackType = 'videoTrack',
  isMirrored = false,
  scalingMode = 'fill',
  style,
}: CallVideoViewProps) {
  return (
    <CallVideoViewNativeComponent
      sessionId={sessionId}
      trackType={trackType}
      isMirrored={isMirrored}
      scalingMode={scalingMode}
      style={[styles.container, style]}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.TRUE_BLACK,
  },
});

export default CallVideoView;