import React from 'react';

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

const ImageUpload: React.FC<ImageUploadProps> = ({
  imageFiles,
  imagePreviews,
  onImageChange,
  onRemoveImage,
  error
}) => {
  return (
    <div className="card mb-4">
      <div className="card-body">
        <div className="mb-3">
          <label className="form-label mb-0">
            Upload Images (Max 5)
          </label>
          <div className="form-text mb-2">
            Have pictures of everything that's included
          </div>
          <input
            type="file"
            className="form-control"
            onChange={onImageChange}
            accept="image/*"
            multiple
            disabled={imageFiles.length >= 5}
          />
        </div>

        {imagePreviews.length > 0 && (
          <div className="row mt-3">
            {imagePreviews.map((preview, index) => (
              <div key={index} className="col-6 col-md-4 col-lg-3 mb-3">
                <div className="position-relative">
                  <img
                    src={preview}
                    alt={`Preview ${index + 1}`}
                    className="img-fluid rounded"
                    style={{
                      width: "100%",
                      height: "150px",
                      objectFit: "cover",
                    }}
                  />
                  <button
                    type="button"
                    className="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
                    onClick={() => onRemoveImage(index)}
                  >
                    <i className="bi bi-x"></i>
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default ImageUpload;