// app/components/admin/sidebar-widget-editors/RecentPostsWidgetEditor.tsx

'use client';


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

interface RPProps { props: RecentPostsWidgetProps; onUpdate: (p: RecentPostsWidgetProps) => void; }

export default function RecentPostsWidgetEditor({ props, onUpdate }: RPProps) {
  const posts = props.posts ?? [];

  const updatePost = (idx: number, field: string, value: string) => {
    const updated = posts.map((p, i) => i === idx ? { ...p, [field]: value } : p);
    onUpdate({ ...props, posts: updated });
  };

  const addPost = () =>
    onUpdate({ ...props, posts: [...posts, { id: Date.now().toString(), title: 'New Post', date: '', link: '#' }] });

  const removePost = (idx: number) =>
    onUpdate({ ...props, posts: posts.filter((_, i) => i !== idx) });

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Widget Title</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.title ?? ''} onChange={e => onUpdate({ ...props, title: e.target.value })} />
      </div>
      <div>
        <div className="flex items-center justify-between mb-2">
          <label className="text-sm font-medium text-gray-700">Posts</label>
          <button onClick={addPost} className="text-xs bg-blue-600 text-white px-3 py-1 rounded-lg hover:bg-blue-700">+ Add Post</button>
        </div>
        <div className="space-y-3">
          {posts.map((post, idx) => (
            <div key={post.id} className="border border-gray-200 rounded-lg p-3 space-y-2 bg-gray-50">
              <input placeholder="Title" className="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                value={post.title} onChange={e => updatePost(idx, 'title', e.target.value)} />
              <input placeholder="Date (e.g. Jan 12, 2025)" className="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                value={post.date} onChange={e => updatePost(idx, 'date', e.target.value)} />
              <input placeholder="Link (e.g. /blog/post)" className="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                value={post.link} onChange={e => updatePost(idx, 'link', e.target.value)} />
              <button onClick={() => removePost(idx)} className="text-xs text-red-600 hover:underline">Remove</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}