- ✅

- ✅
- ✅
- ✅

features/trip/components/image-url-input.tsx

@@ -1,24 +1,31 @@
 "use client";
 
-import { useState } from "react";
+import { LIMITS } from "@/lib/limits";
 
-export function ImageUrlInput() {
-  const [urls, setUrls] = useState<string[]>([""]);
+interface ImageUrlInputProps {
+  value: string[];
+  onChange: (urls: string[]) => void;
+}
+
+export function ImageUrlInput({ value, onChange }: ImageUrlInputProps) {
+  const urls = value.length > 0 ? value : [""];
+  const max = LIMITS.MAX_IMAGE_URLS;
 
   function addField() {
-    if (urls.length < 5) {
-      setUrls([...urls, ""]);
+    if (urls.length < max) {
+      onChange([...urls, ""]);
     }
   }
 
   function removeField(index: number) {
-    setUrls(urls.filter((_, i) => i !== index));
+    const next = urls.filter((_, i) => i !== index);
+    onChange(next.length > 0 ? next : [""]);
   }
 
-  function updateField(index: number, value: string) {
+  function updateField(index: number, next: string) {
     const updated = [...urls];
-    updated[index] = value;
-    setUrls(updated);
+    updated[index] = next;
+    onChange(updated);
   }
 
   return (
@@ -27,13 +34,14 @@ export function ImageUrlInput() {
         <span className="text-sm font-semibold text-neutral-700">
           Foto Trip (URL)
         </span>
-        <span className="text-xs text-neutral-400">{urls.length}/5</span>
+        <span className="text-xs text-neutral-400">
+          {urls.length}/{max}
+        </span>
       </label>
       <div className="space-y-2">
         {urls.map((url, i) => (
           <div key={i} className="flex gap-2">
             <input
-              name="imageUrls"
               type="url"
               value={url}
               onChange={(e) => updateField(i, e.target.value)}
@@ -48,6 +56,7 @@ export function ImageUrlInput() {
               <button
                 type="button"
                 onClick={() => removeField(i)}
+                aria-label={`Hapus foto ${i + 1}`}
                 className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-neutral-200 text-neutral-400 hover:bg-red-50 hover:text-red-500"
               >
                 ✕
@@ -56,7 +65,7 @@ export function ImageUrlInput() {
           </div>
         ))}
       </div>
-      {urls.length < 5 && (
+      {urls.length < max && (
         <button
           type="button"
           onClick={addField}
@@ -66,7 +75,7 @@ export function ImageUrlInput() {
         </button>
       )}
       <p className="mt-1.5 text-xs text-neutral-400">
-        Upload foto ke hosting (imgur, imgbb, dll) lalu paste URL-nya di sini
+        Upload foto ke hosting (imgur, imgbb, dll) lalu paste URL-nya di sini.
       </p>
     </div>
   );