"use client";

import { useState } from "react";
import { Select3D } from "./Select3D";

/**
 * SAFE WRAPPER
 * - prevent accidental form submit
 * - isolate dropdown interaction
 * - debounce-like behavior control
 */

export function Select3DPage({
  value,
  onChange,
  options,
  placeholder,
  label,
  fullWidth = true,
}: {
  value: string;
  onChange: (v: string) => void;
  options: { label: string; value: string }[];
  placeholder?: string;
  label?: string;
  fullWidth?: boolean;
}) {
  const [internalValue, setInternalValue] = useState(value);

  const handleChange = (v: string) => {
    // update local first (prevent flicker / double trigger)
    setInternalValue(v);

    // delay sync ke parent (prevents submit collision)
    setTimeout(() => {
      onChange(v);
    }, 0);
  };

  return (
    <div
      className="space-y-1"
      onClick={(e) => {
        // penting: stop bubbling ke form
        e.stopPropagation();
      }}
    >
      {label && (
        <label className="text-sm text-green-900 font-medium">
          {label}
        </label>
      )}

      <Select3D
        value={internalValue}
        onChange={handleChange}
        options={options}
        placeholder={placeholder}
        fullWidth={fullWidth}
      />
    </div>
  );
}