import React, { useState } from 'react';
import { ScrollView } from 'react-native';
import { Icon, Slider } from 'react-native-elements';
import C from 'rn-class';

const PlayerContents = props => {
  const { Pages } = props;
  const [curPlayIdx, setCurPlayIdx] = useState(0);

  return (
    <ScrollView>
      <C.Text cls="flx1 ta-c">{Pages.subtitle}</C.Text>
      <C.View cls="flx2 ph5 mt5">
        <C.Text cls="fw-b">{Pages.subtitle}</C.Text>
        <C.Text cls="mt2" numberOfLines={10}>
          {Pages.contens}
        </C.Text>
      </C.View>
      <C.View cls="flx1 flx-row jc-sa ai-c mt5">
        <C.EL.Icon type="ionicon" name="md-rewind" />
        <C.EL.Icon type="ionicon" name="md-pause" />
        <C.EL.Icon type="ionicon" name="md-fastforward" />
      </C.View>
      <C.View cls="flx1 ai-c mt2">
        <Slider
          style={{ width: '80%' }}
          thumbTintColor="#333"
          value={curPlayIdx}
          onValueChange={value => setCurPlayIdx(value)}
        />
      </C.View>
    </ScrollView>
  );
};

export default PlayerContents;
