import React, { useState } from "react";
import { action } from "storybook/actions";
import {
  ActionItem,
  Card,
  Content,
  InputDate,
  Text,
} from "@jobber/components-native";
import type { ActionItemProps } from "@jobber/components-native";

export function ActionItemMixedComponentsExample(
  props: Partial<ActionItemProps>,
) {
  const [startDate, setStartDate] = useState<Date | undefined>(undefined);

  return (
    <Card>
      <Content>
        <InputDate
          placeholder="Start date"
          value={startDate}
          onChange={setStartDate}
        />
      </Content>
      <ActionItem
        icon="person"
        title="Assigned to"
        onPress={() => action("alert")("👍")}
        {...props}
      >
        <Text>Casey Young</Text>
      </ActionItem>
    </Card>
  );
}