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

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

interface CtaProps { props: ContactCtaWidgetProps; onUpdate: (p: ContactCtaWidgetProps) => void; }

export default function ContactCtaWidgetEditor({ props, onUpdate }: CtaProps) {
  const f = (field: keyof ContactCtaWidgetProps) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
    onUpdate({ ...props, [field]: e.target.value });

  return (
    <div className="space-y-4">
      {(['title', 'description', 'phone', 'email', 'buttonText', 'buttonLink'] as const).map(field => (
        <div key={field}>
          <label className="block text-sm font-medium text-gray-700 mb-1 capitalize">{field.replace(/([A-Z])/g, ' $1')}</label>
          {field === 'description' ? (
            <textarea rows={3} 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)} />
          ) : (
            <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>
      ))}
    </div>
  );
}