// app/components/admin/sidebar-widget-editors/ImageWidgetEditor.tsx
'use client';

// ImageWidgetEditor
import { ImageWidgetProps } from '@/lib/page-builder/container-types';

interface ImgProps { props: ImageWidgetProps; onUpdate: (p: ImageWidgetProps) => void; }

export default function ImageWidgetEditor({ props, onUpdate }: ImgProps) {
  const f = (field: keyof ImageWidgetProps) => (e: React.ChangeEvent<HTMLInputElement>) =>
    onUpdate({ ...props, [field]: e.target.value });

  return (
    <div className="space-y-4">
      {(['title', 'src', 'alt', 'link', 'caption'] as const).map(field => (
        <div key={field}>
          <label className="block text-sm font-medium text-gray-700 mb-1 capitalize">{field}</label>
          <input className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            value={(props[field] as string) ?? ''} onChange={f(field)} />
        </div>
      ))}
      {props.src && (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={props.src} alt={props.alt} className="w-full rounded-lg object-cover max-h-40" />
      )}
    </div>
  );
}