import React, { useState } from "react";
import { Button, Input } from "antd";

export type CreateFolderPopoverProps = {
  onCreate: (name: string) => void;
  onCancel?: () => void;
};

export function CreateFolderPopover({
  onCreate,
  onCancel,
}: CreateFolderPopoverProps) {
  const [name, setName] = useState<string>("");
  return (
    <div>
      <Input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="이름"
        style={{ marginBottom: 10 }}
      />
      <div className="ant-popover-buttons">
        <Button size="small" onClick={onCancel}>
          취소
        </Button>
        <Button type="primary" size="small" onClick={() => onCreate(name)}>
          생성
        </Button>
      </div>
    </div>
  );
}