import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { useTranslation } from 'react-i18next';

import useModel from 'flooks';
import HomeModel from './Home/model';
import MerchantCom from './Home/MerchantCom';

import Header from '../../components/Header';

export default function MerchantsListScreen() {
  const { t } = useTranslation();
  const { allnewMerchants } = useModel(HomeModel, ['allnewMerchants']);

  return (
    <>
      <Header title={t('xin-dian-tui-jian')} />
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#fff',
        }}
      >
        {allnewMerchants.map((item) => {
          return (
            <Div key={item.id}>
              <MerchantCom info={item} />
            </Div>
          );
        })}
      </ScrollView>
    </>
  );
}