/* eslint-disable global-require */
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 { List } from 'react-native-paper';

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

export default function CooperationScreen({ navigation }) {
  const { t } = useTranslation();
  return (
    <>
      <Header title={t('he-zuo-shen-qing')} />
      <ScrollView>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('shang-jia-ru-zhu')}
            description={() => {
              return (
                <Div mt={10}>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    {t('tips5')}
                  </Text>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    {t('tips6')}13455324344（{t('lian-xi-fang-shi')}）
                  </Text>
                </Div>
              );
            }}
            left={() => (
              <Image
                w={19}
                h={17}
                alignSelf="center"
                mx={10}
                source={require('../../assets/images/cooperation3.png')}
              />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('Apply', { type: '商家' })}
          />
        </Div>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('qi-shou-zhao-mu')}
            description={() => {
              return (
                <Div mt={10}>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    {t('rider')}
                  </Text>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    {t('rider2')}
                    13455324344（{t('lian-xi-fang-shi')}）
                  </Text>
                </Div>
              );
            }}
            left={() => (
              <Image
                w={19}
                h={17}
                alignSelf="center"
                mx={10}
                source={require('../../assets/images/cooperation2.png')}
              />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('Apply', { type: '骑手' })}
          />
        </Div>
        <Div bg="white" mb={5}>
          <List.Item
            title={t('shang-wu-he-zuo')}
            description={() => {
              return (
                <Div mt={10}>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    {t('shang-wu-he-zuo-qing-lian-xi')}13455324344（
                    {t('lian-xi-fang-shi')}）
                  </Text>
                </Div>
              );
            }}
            left={() => (
              <Image
                w={19}
                h={17}
                alignSelf="center"
                mx={10}
                source={require('../../assets/images/cooperation1.png')}
              />
            )}
            right={(props) => <List.Icon {...props} icon="chevron-right" />}
            onPress={() => navigation.navigate('Apply', { type: '商务' })}
          />
        </Div>
      </ScrollView>
    </>
  );
}