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

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

  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header navigation={navigation} smTitle={t('menu_category_title')} />
      <View style={styles.container}>
        <ScrollView>
          <View style={[styles.infoSection, styles.horizontal]}>
            <Note message="Tambahkan 1 karegori dengan menu makanan agar mempermudah saat verifikasi data outlet anda." />
          </View>
          <View style={styles.spacing} />
          <View style={[styles.sceneTopSection, styles.horizontal]}>
            <Text style={styles.sceneLabel}>{t('category_list_text')}</Text>
            <TouchableOpacity
              onPress={() =>
                navigation.navigate('AddMenuCategory', {type: 'add'})
              }
              style={styles.buttonAddCategory}>
              <Text style={styles.buttonAddCategoryTitle}>Tambah</Text>
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            activeOpacity={0.5}
            onPress={() => navigation.navigate('ProductList')}
            style={styles.categoryItem}>
            <Text style={styles.categoryTitle}>Mie Ayam</Text>
            <View style={styles.categoryBadgeSection}>
              <View style={styles.categoryBadge}>
                <Text style={styles.categoryBadgeTitle}>10</Text>
              </View>
              <Icon
                name="chevron-right"
                type="Feather"
                style={styles.categoryIcon}
              />
            </View>
          </TouchableOpacity>
        </ScrollView>
      </View>
    </Container>
  );
};

export default MenuCategory;
