import React from 'react';
import { FileItem } from '../types';

interface FileListProps {
  files: FileItem[];
  filter: string;
}

const FileList: React.FC<FileListProps> = ({ files, filter }) => {
  const filteredFiles = files.filter(f => 
    f.name.toLowerCase().includes(filter.toLowerCase()) || 
    f.tags.some(t => t.toLowerCase().includes(filter.toLowerCase()))
  );

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-full">
      <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
        <h2 className="text-lg font-semibold text-slate-800">Recent Files</h2>
        {filter && (
            <span className="px-2 py-1 bg-indigo-50 text-indigo-700 text-xs rounded-full font-medium">
                Filtering by: "{filter}"
            </span>
        )}
      </div>
      <div className="flex-1 overflow-y-auto p-2">
        <table className="w-full text-left text-sm text-slate-600">
          <thead className="text-xs uppercase bg-slate-50 text-slate-500 font-semibold">
            <tr>
              <th className="px-4 py-3 rounded-l-lg">Name</th>
              <th className="px-4 py-3">Date</th>
              <th className="px-4 py-3">Size</th>
              <th className="px-4 py-3 rounded-r-lg">Tags</th>
            </tr>
          </thead>
          <tbody>
            {filteredFiles.length === 0 ? (
                <tr>
                    <td colSpan={4} className="px-4 py-8 text-center text-slate-400">
                        No files found matching "{filter}"
                    </td>
                </tr>
            ) : (
                filteredFiles.map((file) => (
                <tr key={file.id} className="hover:bg-slate-50 transition-colors border-b border-slate-50 last:border-0">
                    <td className="px-4 py-3 font-medium text-slate-900 flex items-center gap-2">
                    <span className={`w-8 h-8 rounded flex items-center justify-center text-xs font-bold ${
                        file.type === 'pdf' ? 'bg-red-100 text-red-600' :
                        file.type === 'xlsx' ? 'bg-green-100 text-green-600' :
                        file.type === 'docx' ? 'bg-blue-100 text-blue-600' :
                        file.type === 'pptx' ? 'bg-orange-100 text-orange-600' :
                        'bg-slate-100 text-slate-600'
                    }`}>
                        {file.type.toUpperCase().slice(0, 3)}
                    </span>
                    {file.name}
                    </td>
                    <td className="px-4 py-3">{file.date}</td>
                    <td className="px-4 py-3">{file.size}</td>
                    <td className="px-4 py-3">
                    <div className="flex gap-1 flex-wrap">
                        {file.tags.map(tag => (
                        <span key={tag} className="px-2 py-0.5 bg-slate-100 rounded-full text-xs text-slate-500">
                            #{tag}
                        </span>
                        ))}
                    </div>
                    </td>
                </tr>
                ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default FileList;