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

import UserBrief from '../home/UserBrief';
import SectionItem from '../home/SectionItem';

export default class SPHeaderCell extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        let {avatar, nickName, timeago, isOwner, sectionName} = this.props;
        return(
            <View style={styles.container}>
                <View style={styles.top}>
                    <UserBrief
                        avatar={avatar}
                        name={nickName}
                        timeago={timeago}
                        isOwner={isOwner}
                        onPressAvatar={this.props.onPressAvatar}
                    />
                    <SectionItem
                        name={sectionName}
                        onPressSection={this.props.onPressSection}
                    />
                </View>
                <View style={styles.bottom}>
                    <Text
                        style={styles.operateText}
                        onPress={() => {
                            this.props.onPressReportOrDelete && this.props.onPressReportOrDelete();
                        }}
                    >
                        {isOwner ? '删除本帖' : '举报'}
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        paddingTop: 10,
        paddingBottom: 10,
        backgroundColor: 'white',
        marginLeft: 15,
        marginRight: 15,
    },
    top: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    bottom: {
        marginTop: 15,
    },
    operateText: {
        color: '#4a90e2',
        fontSize: 12,
    },
});