import { PlusIcon } from "@radix-ui/react-icons";
import { cn } from "@/util/utils";
import { AutoResizingTextarea } from "./AutoResizingTextarea/AutoResizingTextarea";

type Props = React.ComponentProps<typeof AutoResizingTextarea> & {
  onIconClick: () => void;
};

function WorkflowBlockInputTextarea(props: Props) {
  return (
    <div className="relative">
      <AutoResizingTextarea
        {...props}
        className={cn("pr-9", props.className)}
      />
      <div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
        <div className="rounded p-1 hover:bg-muted" onClick={props.onIconClick}>
          <PlusIcon className="size-4" />
        </div>
      </div>
    </div>
  );
}

export { WorkflowBlockInputTextarea };