import { FC } from 'react';
import { Container } from 'components/layout';
import { ResizeMode, Video } from 'expo-av';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export const Floating: FC<ParticipantsProps> = () => {
  const { bottom } = useSafeAreaInsets();
  const marginBottom = bottom + 70;
  return (
    <Container
      borderRadius={10}
      position="absolute"
      padding="xs"
      zIndex={2}
      width={200}
      height={300}
      overflow="hidden"
      bottom={marginBottom}
      right={30}
    >
      <Video
        style={{
          width: 300,
          height: 300,
          borderRadius: 10,
        }}
        resizeMode={ResizeMode.COVER}
        source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
      />
    </Container>
  );
};

type ParticipantType = {
  id: string;
  uri: string;
  username: string;
};

interface ParticipantsProps {
  participant: ParticipantType;
}