import React from 'react';

export type FileType = 'image' | 'video' | 'document' | null;

interface FilePreviewProps {
  file: File;
  type: FileType;
  previewUrl: string;
  onRemove: () => void;
  uploadProgress?: number;
  uploadError?: string;
}

export const FilePreview: React.FC<FilePreviewProps> = ({
  file,
  type,
  previewUrl,
  onRemove,
  uploadProgress,
  uploadError
}) => {
  const getFileIcon = () => {
    switch (type) {
      case 'document':
        return (
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
          </svg>
        );
      default:
        return null;
    }
  };

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  return (
    <div className='file-preview-wrapper' style={{ display: 'flex', alignItems: 'center' }}>
         <div className="file-preview">
      <div className="file-preview-content">
        {type === 'image' && (
          <img src={previewUrl} alt={file.name} className="file-preview-image" />
        )}
        {type === 'video' && (
          <video controls className="file-preview-video">
            <source src={previewUrl} type={file.type} />
          </video>
        )}
        {type === 'document' && (
          <div className="file-preview-document">
            {getFileIcon()}
          </div>
        )}
        
        <div className="file-info">
          <span className="file-name">{file.name}</span>
          <span className="file-size">{formatFileSize(file.size)}</span>
        </div>
        
        {uploadProgress !== undefined && uploadProgress < 100 && (
          <div className="upload-progress">
            <div 
              className="progress-bar" 
              style={{ width: `${uploadProgress}%` }}
            ></div>
          </div>
        )}
        
        {uploadError && (
          <div className="upload-error">{uploadError}</div>
        )}
      </div>
      
      <button 
        type="button" 
        className="remove-file" 
        onClick={onRemove}
        aria-label="Remove file"
      >
        &times;
      </button>
    </div>
    </div>
 
  );
};