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

<Div p="xl" shadow="sm" rounded="md">
  <Text textAlign="center">This is a Div</Text>
</Div>;

<Div h={40} w={40} bg="pink500"></Div>
<Div h={40} w={40} bg="green500"></Div>
<Div h={40} w={40} bg="teal500"></Div>
<Div h={40} w={40} bg="yellow500"></Div>
<Div h={40} w={40} bg="red500"></Div>
<Div h={40} w={40} bg="blue500"></Div>
<Div h={40} w={40} bg="gray500"></Div>

<Div h={40} w={40} bg="green200" borderColor="green500" borderWidth={1} />
<Div h={40} w={40} bg="yellow200" borderColor="yellow500" borderWidth={1} />
<Div h={40} w={40} bg="red200" borderColor="red500" borderWidth={1} />
<Div h={40} w={40} bg="blue200" borderColor="blue500" borderWidth={1} />
<Div h={40} w={40} bg="gray200" borderColor="gray500" borderWidth={1} />

<Div h={40} w={40} rounded="md" shadow="xs"></Div>
<Div h={40} w={40} rounded="md" shadow="sm"></Div>
<Div h={40} w={40} rounded="md" shadow="md"></Div>
<Div h={40} w={40} rounded="md" shadow="lg"></Div>
<Div h={40} w={40} rounded="md" shadow="xl"></Div>
<Div h={40} w={40} rounded="md" shadow="2xl"></Div>

<Div h={40} w={40} bg="teal500"></Div>
<Div h={40} w={40} bg="teal500" rounded="sm"></Div>
<Div h={40} w={40} bg="teal500" rounded="md"></Div>
<Div h={40} w={40} bg="teal500" rounded="lg"></Div>
<Div h={40} w={40} bg="teal500" rounded="xl"></Div>

<Div row m="xl">
  <Div h={40} flex={3} bg="red500" />
  <Div h={40} flex={1} mx="sm" bg="yellow500" />
  <Div h={40} flex={2} bg="green500" />
</Div>

<Div m="xl">
  <Div>
    <Div
      rounded="xl"
      h={150}
      bgImg={{
        uri:
          "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
      }}
    >
      <Div
        bg="pink500"
        rounded="md"
        row
        flexWrap="wrap"
        px="md"
        m="lg"
        alignSelf="flex-start"
      >
        <Text color="white" fontSize="sm">
          2 Rooms
        </Text>
      </Div>
    </Div>
    <Div row alignItems="center">
      <Div flex={1}>
        <Text fontWeight="bold" fontSize="xl" mt="sm">
          Sunny Apartment
        </Text>
        <Text color="gray500" fontSize="sm">
          Gurgoan, India
        </Text>
      </Div>
      <Div row alignItems="center">
        <Text color="blue500" fontWeight="bold" fontSize="xl">
          $500
        </Text>
        <Text color="gray500" ml="md">
          / per day
        </Text>
      </Div>
    </Div>
  </Div>
</Div>