'use client';

import { DemoSectionProps } from '@/lib/page-builder/types';
import { EditorProps } from '@/lib/page-builder/types';

export default function DemoSectionEditor({ props, onUpdate }: EditorProps<DemoSectionProps>) {
  const handleChange = (field: keyof DemoSectionProps, value: unknown) => {
    onUpdate({ ...props, [field]: value });
  };

  return (
    <div className="space-y-6 max-h-[70vh] overflow-y-auto p-1">
      <h4 className="font-semibold text-lg text-var-text border-b border-var-border pb-2">Demo Section</h4>
      
      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Title</label>
        <input
          type="text"
          value={props.title || ''}
          onChange={(e) => handleChange('title', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Description</label>
        <textarea
          value={props.description || ''}
          onChange={(e) => handleChange('description', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          rows={3}
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Demo URL</label>
        <input
          type="url"
          value={props.demoUrl || ''}
          onChange={(e) => handleChange('demoUrl', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          placeholder="https://www.youtube.com/watch?v=..."
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Browser URL Display</label>
        <input
          type="text"
          value={props.browserUrl || ''}
          onChange={(e) => handleChange('browserUrl', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          placeholder="admin.nextdash.com/dashboard"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-var-text mb-2">Preview Image URL (Optional)</label>
        <input
          type="url"
          value={props.previewImage || ''}
          onChange={(e) => handleChange('previewImage', e.target.value)}
          className="w-full p-2 bg-var-input border border-var-border rounded text-var-text placeholder-var-input focus:ring-2 focus:ring-var-primary focus:border-var-primary"
          placeholder="https://example.com/preview.jpg"
        />
        <p className="text-xs text-var-text-muted mt-1">If not provided, a play button will be shown</p>
      </div>
    </div>
  );
}