import React, { Component } from 'react';
import {
  asset,
  Pano,
  View,
  StyleSheet,
} from 'react-vr';
import Poster from './Poster';
import posters from '../posters.json';

export default class App extends Component {
  render() {
    return (
      <View>
        <Pano source={asset('background.jpg')} />
        <View style={styles.posters}>
          {posters.map(poster =>
            <Poster
              key={poster.thumbnailSrc}
              thumbnailSrc={poster.thumbnailSrc}
            />
          )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  posters: {
    flex: 1,
    flexDirection: 'row',
    transform: [{
      translate: [-2.5, 2, -7],
    }],
  },
});