import React from "react";
import { action } from "storybook/actions";
import {
  ActionItem,
  ActionItemGroup,
  Card,
  Content,
  Text,
  Typography,
} from "@jobber/components-native";

export function ActionItemGroupMixedComponentsExample() {
  return (
    <Card>
      <ActionItemGroup>
        <ActionItem
          title={"Stephen Campbell"}
          icon={"person"}
          onPress={() => action("alert")("client")}
        />
        <Content>
          <Typography fontFamily="display">Client name</Typography>
          <Text>Stephen Campbell</Text>
          <Typography fontFamily="display">Client type</Typography>
          <Text>Residential</Text>
        </Content>
        <ActionItem
          title={"Request #13"}
          icon={"request"}
          onPress={() => action("alert")("request")}
        />
        <ActionItem
          title={"Quote #64"}
          icon={"quote"}
          onPress={() => action("alert")("quote")}
        />
        <ActionItem
          title={"Job #12"}
          icon={"job"}
          onPress={() => action("alert")("job")}
        />
        <ActionItem
          title={"Invoice #72"}
          icon={"invoice"}
          onPress={() => action("alert")("invoice")}
        >
          <Text>$250.00</Text>
        </ActionItem>
      </ActionItemGroup>
    </Card>
  );
}