import React, { Component } from 'react';
import { View, Text, Image, TextInput, Button, StyleSheet } from 'react-native';
import giay1 from '../assets/giay1.jpg';

export default class Exe extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Nhóm 9</Text>
        <Text style={styles.text}>Lê Hồ</Text>
        <Image style={styles.logo} source={giay1} />
        <View style={styles.inputContainer}>
          <TextInput style={styles.input} placeholder="Mã sản phẩm" />
        </View>
        <View style={styles.inputContainer}>
          <TextInput style={styles.input} placeholder="Tên sản phẩm" />
        </View>
        <View style={styles.inputContainer}>
          <TextInput style={styles.input} placeholder="Xuất xứ" />
        </View>
        <View style={styles.button}>
          <View style={styles.buttonContainer}>
            <Button onPress={() => alert('Thêm thành công')} title="Thêm" />
          </View>
          <View style={styles.buttonContainer}>
            <Button onPress={() => alert('Xóa thành công')} title="Xóa" />
          </View>
          <View style={styles.buttonContainer}>
            <Button onPress={() => alert('Sửa thành công')} title="Sửa" />
          </View>
          <View style={styles.buttonContainer}>
            <Button
              onPress={() => alert('Xóa trắng thành công')}
              title="Xóa trắng"
            />
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f8a000',
    flex: 1,
  },
  logo: {
    width: 200,
    height: 200,
    marginBottom: 25,
    marginTop: 25,
    borderRadius: 50,
  },
  input: {
    height: 40,
    marginLeft: 16,
    borderBottomColor: '#FFFFFF',
    flex: 1,
  },
  button: {
    flexDirection: 'row',
    flex: 1,
  },
  buttonContainer: {
    marginRight: 10,
  },
  inputContainer: {
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius: 30,
    borderBottomWidth: 1,
    width: 250,
    height: 45,
    marginBottom: 20,
    alignItems: 'left',
  },
  text: {
    color: '#fff',
  },
});