export const localStreamStyle = (arg?: { backgroundColor: string }): object => {
  return {
    textAlign: 'center',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: arg?.backgroundColor || '#000',
    position: 'relative',
  }
}

export const localStreamDisplayNameStyle = (arg?: { color: string, fontFamily: string, fontSize: string, }): object => {
  return {
    color: arg?.color || '#fff',
    fontFamily: arg?.fontFamily || 'sans-serif',
    fontSize: arg?.fontSize || '18px',
    position: 'absolute',
    top: 0,
    left: 0,
    paddingTop: '10px',
    paddingLeft: '10px',
  }
}

export const localStreamDisplayNameCenterStyle = (arg?: { color: string, fontFamily: string, fontSize: string, backgroundColor: string, }): object => {
  return {
    textAlign: 'center',
    color: arg?.color || '#fff',
    fontFamily: arg?.fontFamily || 'sans-serif',
    fontSize: arg?.fontSize || '18px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: arg?.color || '#000',
  }
}