import React from "react";
import { View } from "react-native";
import { action } from "storybook/actions";
import type { ComponentProps } from "react";
import { Chip, useAtlantisTheme } from "@jobber/components-native";

export function ChipAccentExample(props: Partial<ComponentProps<typeof Chip>>) {
  const { tokens } = useAtlantisTheme();

  return (
    <View
      style={{
        display: "flex",
        flexDirection: "row",
        flexWrap: "wrap",
        gap: tokens["space-small"],
      }}
    >
      <Chip
        label="Select clients"
        accent="client"
        icon="clients"
        onPress={() => action("alert")("Clients")}
        accessibilityLabel="Select clients"
        isActive={true}
        {...props}
      />
      <Chip
        label="Select requests"
        accent="request"
        icon="request"
        onPress={() => action("alert")("Requests")}
        accessibilityLabel={"Select Requests"}
        isActive={true}
      />
      <Chip
        label="Select quotes"
        accent="quote"
        icon="quote"
        onPress={() => action("alert")("Quotes")}
        accessibilityLabel={"Select Quotes"}
        isActive={true}
      />
      <Chip
        label="Select jobs"
        accent="job"
        icon="job"
        onPress={() => action("alert")("Jobs")}
        accessibilityLabel={"Select Jobs"}
        isActive={true}
      />
      <Chip
        label="Select invoices"
        accent="invoice"
        icon="invoice"
        onPress={() => action("alert")("Invoices")}
        accessibilityLabel={"Select Invoices"}
        isActive={true}
      />
    </View>
  );
}