import React from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { action } from "storybook/actions";
import {
  AtlantisOverlayProvider,
  ButtonGroup,
} from "@jobber/components-native";
import type { ButtonGroupSecondaryActionProps } from "../index";

export function ButtonGroupSecondaryExample(
  props: Partial<ButtonGroupSecondaryActionProps>,
) {
  return (
    <SafeAreaProvider>
      <AtlantisOverlayProvider>
        <ButtonGroup
          bottomSheetHeading="What would you like to do"
          showCancelInBottomSheet={true}
        >
          <ButtonGroup.PrimaryAction
            label={"Click that ellipsis >>>"}
            buttonType={"secondary"}
            onPress={() => action("alert")("No, not me. The ellipsis!")}
          />
          <ButtonGroup.SecondaryAction
            label="Create"
            icon="plus"
            onPress={() => action("console.log")("create")}
            {...props}
          />
        </ButtonGroup>
      </AtlantisOverlayProvider>
    </SafeAreaProvider>
  );
}