import { Plus } from 'lucide-react';

interface ImageFormProps {
  url: string;
  caption: string;
  alt: string;
  onUrlChange: (url: string) => void;
  onCaptionChange: (caption: string) => void;
  onAltChange: (alt: string) => void;
  onSubmit: () => void;
  submitLabel: string;
}

export function ImageForm({
  url,
  caption,
  alt,
  onUrlChange,
  onCaptionChange,
  onAltChange,
  onSubmit,
  submitLabel
}: ImageFormProps) {
  return (
    <div className="space-y-3">
      <div>
        <label htmlFor="imageUrl" className="block text-sm font-medium text-gray-700">
          Image URL
        </label>
        <input
          type="url"
          id="imageUrl"
          value={url}
          onChange={(e) => onUrlChange(e.target.value)}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          placeholder="https://example.com/image.jpg"
        />
      </div>
      <div>
        <label htmlFor="imageCaption" className="block text-sm font-medium text-gray-700">
          Caption
        </label>
        <input
          type="text"
          id="imageCaption"
          value={caption}
          onChange={(e) => onCaptionChange(e.target.value)}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>
      <div>
        <label htmlFor="imageAlt" className="block text-sm font-medium text-gray-700">
          Alt Text
        </label>
        <input
          type="text"
          id="imageAlt"
          value={alt}
          onChange={(e) => onAltChange(e.target.value)}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>
      <button
        onClick={onSubmit}
        disabled={!url.trim()}
        className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <Plus size={16} className="mr-2" />
        {submitLabel}
      </button>
    </div>
  );
}