import React from 'react';
import { Download, X, FileText, Image, Music } from 'lucide-react';
import { formatFileSize } from '../../utils/fileValidation';

const FilePreview = ({ file, onRemove, onDownload }) => {
  const getFileIcon = () => {
    if (file.type.startsWith('image/')) return <Image className="w-6 h-6" />;
    if (file.type.startsWith('audio/')) return <Music className="w-6 h-6" />;
    return <FileText className="w-6 h-6" />;
  };

  const getFileType = () => {
    if (file.type.startsWith('image/')) return 'Image';
    if (file.type.startsWith('audio/')) return 'Audio';
    if (file.type === 'application/pdf') return 'PDF';
    if (file.type.startsWith('text/')) return 'Text';
    return 'File';
  };

  return (
    <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
      <div className="flex items-center space-x-3">
        <div className="text-primary-500">
          {getFileIcon()}
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
            {file.name}
          </p>
          <p className="text-xs text-gray-500 dark:text-gray-400">
            {getFileType()} • {formatFileSize(file.size)}
          </p>
        </div>
      </div>

      <div className="flex items-center space-x-2">
        {onDownload && (
          <button
            onClick={() => onDownload(file)}
            className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
            title="Download"
          >
            <Download size={16} />
          </button>
        )}
        
        {onRemove && (
          <button
            onClick={() => onRemove(file)}
            className="p-1.5 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
            title="Remove"
          >
            <X size={16} />
          </button>
        )}
      </div>
    </div>
  );
};

export default FilePreview;