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

export default function CommentItem({ info }) {
  const imgs = info.img ? info.img.split(',') : [];

  const imageSize = imgs.length > 1 ? 80 : 167;
  return (
    <Div row py={10} px={15} bg="white" mt={10}>
      <Image source={{ uri: info.avatar }} w={33} h={33} />
      <Div flex={1} ml={5}>
        <Div row>
          <Div flex={1}>
            <Text fontSize="sm" textAlign="left">
              {info.nickname}
            </Text>
            <Div row>
              <Icon name="like1" color="brand500" />
              <Text fontSize="sm" color="brand500" textAlign="left">
                {info.likes || 0}
              </Text>
            </Div>
          </Div>
          <Text fontSize="sm" color="gray400" textAlign="left">
            {info.appraiseTime}
          </Text>
        </Div>
        <Text my={5} textAlign="left">
          {info.goodsAppraise}
        </Text>
        <Div row>
          {imgs.map((item, index) => {
            return (
              <Image
                key={index}
                mt={5}
                mr={5}
                source={{ uri: item }}
                w={imageSize}
                h={imageSize}
                rounded={3}
              />
            );
          })}
        </Div>
      </Div>
    </Div>
  );
}