import React from 'react';
import { IMAGE_LIMITS } from '../config/imageLimits';

interface ForumImageUploadProps {
  imageFiles: File[];
  imagePreviews: string[];
  onImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onRemoveImage: (index: number) => void;
  compact?: boolean;
}

const ForumImageUpload: React.FC<ForumImageUploadProps> = ({
  imageFiles,
  imagePreviews,
  onImageChange,
  onRemoveImage,
  compact = false
}) => {
  const maxImages = IMAGE_LIMITS.forum;

  return (
    <div className={compact ? 'mb-2' : 'mb-3'}>
      <label className="form-label mb-1">
        <i className="bi bi-image me-1"></i>
        Add Images (Max {maxImages})
      </label>
      <input
        type="file"
        className="form-control form-control-sm"
        onChange={onImageChange}
        accept="image/*"
        multiple
        disabled={imageFiles.length >= maxImages}
      />
      {imageFiles.length > 0 && (
        <small className="text-muted d-block mt-1">
          {imageFiles.length} / {maxImages} images selected
        </small>
      )}

      {imagePreviews.length > 0 && (
        <div className="row mt-2 g-2">
          {imagePreviews.map((preview, index) => (
            <div key={`${imageFiles[index]?.name}-${index}`} className={compact ? 'col-4' : 'col-6 col-md-4 col-lg-3'}>
              <div className="position-relative border rounded p-1" style={{ backgroundColor: '#f8f9fa' }}>
                <img
                  src={preview}
                  alt={`Preview ${index + 1}`}
                  className="img-fluid rounded"
                  style={{
                    width: '100%',
                    maxHeight: compact ? '150px' : '200px',
                    objectFit: 'contain'
                  }}
                />
                <button
                  type="button"
                  className="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
                  onClick={() => onRemoveImage(index)}
                  style={{ padding: '2px 6px', fontSize: '12px' }}
                >
                  <i className="bi bi-x"></i>
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default ForumImageUpload;
