import React from "react";
import { Card, Content, Flex, Text } from "@jobber/components-native";
import type { FlexProps } from "@jobber/components-native";

export function FlexMultiRow(props: Partial<FlexProps>) {
  return (
    <Flex template={["grow", "grow"]} gap="small" {...props}>
      {[
        "Cash",
        "Cheque",
        "Credit card",
        "Bank transfer",
        "Money order",
        "Pigeon Mail",
        "Other",
      ].map(name => (
        <Card key={name}>
          <Content>
            <Text emphasis="strong">{name}</Text>
          </Content>
        </Card>
      ))}
    </Flex>
  );
}