import React from "react";
import ModalShell from "./ModalShell";

export default function RenameModal({ state, setState, onSave }) {
  const open = !!state?.open;
  const type = state?.type;
  const item = state?.item;

  return (
    <ModalShell
      open={open}
      title={type === "folder" ? "تغییر نام پوشه" : "تغییر نام فایل"}
      onClose={() => setState({ open: false, type: null, item: null, value: "" })}
      maxWidth="max-w-md"
    >
      <div className="space-y-3">
        <input
          value={state?.value ?? ""}
          onChange={(e) => setState((p) => ({ ...p, value: e.target.value }))}
          className="w-full rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-[#16325B] px-3 py-2 outline-none dark:text-white"
          placeholder="نام جدید"
          autoFocus
        />

        <div className="flex gap-2 justify-end">
          <button
            type="button"
            className="px-4 py-2 rounded-xl border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/10"
            onClick={() => setState({ open: false, type: null, item: null, value: "" })}
          >
            لغو
          </button>

          <button
            type="button"
            className="px-4 py-2 rounded-xl bg-[#A1E3F980] dark:bg-[#A1E3F919] border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/10"
            onClick={() => onSave?.()}
            disabled={!String(state?.value || "").trim()}
          >
            ذخیره
          </button>
        </div>
      </div>
    </ModalShell>
  );
}
