import React, {useState} from 'react';
import {View, ScrollView} from 'react-native';
import {Container, Header, Button, ProductRaw} from 'components';
import {Colors} from 'global-styles';
import {useTranslation} from 'react-i18next';
import styles from './styles';

const ProductList = ({navigation}) => {
  const {t} = useTranslation();

  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header
        navigation={navigation}
        smTitle={'Mie Ayam'}
        onButtonPress={() =>
          navigation.navigate('AddMenuCategory', {type: 'update'})
        }
      />
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.spacing} />
          <ProductRaw
            onPress={() => navigation.navigate('AddProduct', {type: 'update'})}
          />
          <View style={styles.separator} />
          <ProductRaw
            onPress={() => navigation.navigate('AddProduct', {type: 'update'})}
          />
        </ScrollView>
        <Button
          title="Tambah"
          onPress={() => navigation.navigate('AddProduct', {type: 'add'})}
        />
      </View>
    </Container>
  );
};

export default ProductList;
