"use client";

import { useState } from "react";

const PRESETS = ["Home", "Work", "Other"];

export default function AddressLabelPicker({ defaultValue }: { defaultValue?: string | null }) {
  const startsAsOther = !!defaultValue && !PRESETS.includes(defaultValue);
  const [selected, setSelected] = useState(startsAsOther ? "Other" : defaultValue || "Home");
  const [customLabel, setCustomLabel] = useState(startsAsOther ? defaultValue ?? "" : "");

  return (
    <div className="sm:col-span-2">
      <input type="hidden" name="label" value={selected === "Other" ? customLabel || "Other" : selected} />
      <div className="flex gap-2">
        {PRESETS.map((p) => (
          <button
            key={p}
            type="button"
            onClick={() => setSelected(p)}
            className={`rounded-full px-3 py-1.5 text-xs font-medium transition-colors ${
              selected === p ? "bg-rose-700 text-white" : "border border-stone-300 text-stone-600 hover:bg-stone-50"
            }`}
          >
            {p}
          </button>
        ))}
      </div>
      {selected === "Other" && (
        <input
          type="text"
          value={customLabel}
          onChange={(e) => setCustomLabel(e.target.value)}
          placeholder="Label (e.g. Mom's House)"
          className="mt-2 block w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm"
        />
      )}
    </div>
  );
}