import React from "react";
import { View } from "react-native";
import { Flex, Icon, StatusLabel, Text } from "@jobber/components-native";
import type { FlexProps } from "@jobber/components-native";

export function FlexNested(props: Partial<FlexProps>) {
  return (
    <Flex template={["grow", "shrink"]} align="center" {...props}>
      <Flex align={"flex-start"} template={["shrink", "grow"]}>
        <Icon name="quote" />
        <View>
          <Flex template={["grow", "shrink"]}>
            <Text emphasis="strong">Dylan Tec</Text>
            <StatusLabel text="Success" status="success" />
          </Flex>
          <Text>Sep 03 | $100 | Quote #93</Text>
        </View>
      </Flex>
      <Icon name="arrowRight" />
    </Flex>
  );
}