import type { AccessMode } from "@/lib/types";

interface AccessSettingsEditorProps {
  accessMode: AccessMode;
  accessPassword: string;
  onAccessModeChange: (mode: AccessMode) => void;
  onAccessPasswordChange: (pw: string) => void;
  label?: string;
  passwordLabel?: string;
  passwordHint?: string;
}

export function AccessSettingsEditor({
  accessMode,
  accessPassword,
  onAccessModeChange,
  onAccessPasswordChange,
  label = "Access",
  passwordLabel = "Password",
  passwordHint = "Leave blank to keep existing password",
}: AccessSettingsEditorProps) {
  return (
    <div className="space-y-2">
      <div className="space-y-1.5">
        <label className="block text-xs font-medium text-zinc-400">{label}</label>
        <select
          value={accessMode}
          onChange={(e) => {
            onAccessModeChange(e.target.value as AccessMode);
            onAccessPasswordChange("");
          }}
          className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none"
        >
          <option value="public">Public</option>
          <option value="password_protected">Password protected</option>
          <option value="account_required">Account required</option>
          <option value="owner_only">Owner only</option>
        </select>
      </div>

      {accessMode === "password_protected" && (
        <div className="space-y-1.5">
          <label className="block text-xs font-medium text-zinc-400">
            {passwordLabel}
          </label>
          <input
            type="password"
            placeholder={passwordHint}
            value={accessPassword}
            onChange={(e) => onAccessPasswordChange(e.target.value)}
            className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
          />
        </div>
      )}
    </div>
  );
}