import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';

export const ActionListVertical: React.FunctionComponent = () => (
  <>
    <h4>Multiple groups</h4>
    <ActionList isVertical>
      <ActionListGroup>
        <ActionListItem>
          <Button>Next</Button>
        </ActionListItem>
        <ActionListItem>
          <Button variant="secondary">Back</Button>
        </ActionListItem>
      </ActionListGroup>
      <ActionListGroup>
        <ActionListItem>
          <Button>Submit</Button>
        </ActionListItem>
        <ActionListItem>
          <Button variant="link">Cancel</Button>
        </ActionListItem>
      </ActionListGroup>
    </ActionList>
    <h4>Icons, in two groups</h4>
    <ActionList isVertical>
      <ActionListGroup>
        <ActionListItem>
          <Button aria-label="Close vertical action list group 1" variant="plain" icon={<RhMicronsCloseIcon />} />
        </ActionListItem>
        <ActionListItem>
          <Button
            aria-label="Toggle vertical action list example group 1"
            variant="plain"
            icon={<RhMicronsCheckmarkIcon />}
          />
        </ActionListItem>
      </ActionListGroup>
      <ActionListGroup>
        <ActionListItem>
          <Button aria-label="Close vertical action list group 2" variant="plain" icon={<RhMicronsCloseIcon />} />
        </ActionListItem>
        <ActionListItem>
          <Button
            aria-label="Toggle vertical action list example group 2"
            variant="plain"
            icon={<RhMicronsCheckmarkIcon />}
          />
        </ActionListItem>
      </ActionListGroup>
    </ActionList>
  </>
);