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

export type FileRenamePopoverProps = {
  name: string;
  onRename: (name: string) => void;
  onCancel?: () => void;
};

export function FileRenamePopover({
  name: oldName,
  onRename,
  onCancel,
}: FileRenamePopoverProps) {
  const [name, setName] = useState<string>(oldName);
  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={() => onRename(name)}>
          변경
        </Button>
      </div>
    </div>
  );
}