import { Text } from "react-native-magnus";

<Text>Expecto Patronum</Text>;

import * as React from "react";
import { SafeAreaView, FlatList } from "react-native";
import { ThemeProvider, Text, Div, Image, Icon } from "./magnus";

const App = () => {
  const features = [
    "6.1-inch Liquid Retina HD LCD display",
    "Water and dust resistant (2 meters for up to 30 minutes, IP68)",
    "Dual-camera system with 12MP Ultra Wide and Wide cameras; Night mode, Portrait mode, and 4K video up to 60fps",
    "12MP TrueDepth front camera with Portrait mode, 4K video, and Slo-Mo",
  ];

  return (
    <ThemeProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <Div mx="xl" mt="md">
          <Image
            h={140}
            resizeMode="contain"
            borderWidth={1}
            borderColor="gray300"
            rounded="lg"
            w="100%"
            source={{
              uri:
                "https://images.idgesg.net/images/article/2019/09/iphone-11-and-pros-100810657-large.jpg",
            }}
          />
          <Text
            fontSize="lg"
            fontWeight="bold"
            textTransform="uppercase"
            color="red400"
            letterSpacing={2}
            mt="lg"
          >
            Best Seller
          </Text>
          <Text fontWeight="bold" fontSize="4xl" mt="md">
            Iphone 11
          </Text>
          <Div mt="md" row>
            <Text fontWeight="bold" mr="sm">
              4.6
            </Text>
            <Text color="gray500">(3,444 reviews)</Text>
          </Div>
          <Text mt="md" color="gray700">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa
            veritatis necessitatibus sunt quaerat nulla vel dicta voluptate
            cumque facere quos, ullam numquam incidunt sint, quidem, sit quo.
            Expedita, quidem cumque.
          </Text>
          <Div mt="md">
            <FlatList
              data={features}
              renderItem={({ item }) => (
                <Div row mt="lg">
                  <Icon name="checkcircleo" color="green700" />
                  <Text ml="lg">{item}</Text>
                </Div>
              )}
            />
          </Div>
        </Div>
      </SafeAreaView>
    </ThemeProvider>
  );
};

export default App;