import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image
} from "react-native";

export default class Comment extends Component {
  render() {
    return (
      <View style={styles.courseComment}>
        <View style={[styles.padding, styles.title]}>
          <Text style={styles.font}>{this.props.title}</Text>
          <View style={[ styles.button, styles.center ]}>
            <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
            <Text>写评论</Text>
          </View>
        </View>
        <View style={[ styles.padding ]}>
          <View style={[ styles.title ]}>
            <View style={[ styles.center ]}>
                <Image style={[styles.headImg ]}></Image>
                <View>
                  <Text style={{ fontSize: 16, color: '#373737' }}>小幸运</Text>
                  <Text style={{ fontSize: 14, color: '#7F7F7F' } }>2019-07-05</Text>
                </View>
            </View>
            <View style={[ styles.center ]}>
              <Image source={require('../images/courseDetails/reply.png')} style={styles.reply} />
              <Text>回复</Text>
            </View>
          </View>
          <View style={ styles.padding }>
            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
          </View>
          <View style={[ styles.padding, styles.column ]}>
            <Text style={ styles.color }>卡通小熊</Text>
            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  courseComment: {
    width: '100%',
    backgroundColor: '#fff',
    marginTop: 8,
    marginBottom: 60
  },
  padding: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 10,
    paddingBottom: 10,
  },
  title: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  font: {
    fontSize: 24,
    color: 'black',
    fontWeight: 'bold',
  },
  center: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 98,
    height: 28,
    fontSize: 20,
    borderRadius: 28,
    color: 'black',
    backgroundColor: '#F0F1F5'
  },
  headImg: {
    width: 40,
    height: 40,
    backgroundColor: "red",
    marginRight: 10,
    borderRadius: 40
  },
  iconSize: {
    width: 18,
    height: 18,
    marginRight: 10
  },
  reply: {
    width: 16,
    height: 15,
    marginRight: 5
  },
  courseFont: {
    color: '#373737',
    fontSize: 16
  },
  column: {
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#F3F6FF'
  },
  color: {
    color: '#518AD1'
  }
});