import { Button, ColumnLayout, Input, SpaceBetween, TokenGroup, TokenGroupProps } from "@cloudscape-design/components";

export type InputTokenGroupProps = { 
  type?: React.HTMLInputTypeAttribute; 
  registerInput: any, 
  tokenGroupProps: TokenGroupProps,
  onAdd: () => void,
  onDismiss: (i: number) => void,
};

export const InputTokenGroup = (props: InputTokenGroupProps) => {
  return (
    <SpaceBetween size="xs">
      <ColumnLayout columns={2}>
        <input 
          type={props.type}
          {...props.registerInput}  
        />
        <Button onClick={() => props.onAdd()}>Add</Button>
      </ColumnLayout>
      <TokenGroup 
        onDismiss={(e) => props.onDismiss(e.detail.itemIndex)}
        {...props.tokenGroupProps} 
      />
    </SpaceBetween>
  );
};
