import React, { memo } from 'react';
import type { FileSystemItem as FileSystemItemType } from '../types';
import FolderIcon from './FolderIcon';
import FileIcon from './FileIcon';

interface FileItemProps {
    item: FileSystemItemType;
    isSelected: boolean;
    onSelect: (id: string) => void;
    onDoubleClick?: () => void;
}

const FileItem: React.FC<FileItemProps> = ({ item, isSelected, onSelect, onDoubleClick }) => {
    const itemClasses = `grid grid-cols-12 gap-4 px-4 py-3 items-center transition-colors duration-150 cursor-pointer ${isSelected ? 'bg-indigo-600/30' : 'hover:bg-slate-700/30'
        }`;

    return (
        <div
            onClick={() => onSelect(item.id)}
            onDoubleClick={onDoubleClick}
            className={itemClasses}
        >
            <div className="col-span-6 flex items-center gap-3">
                {item.type === 'folder' ? <FolderIcon /> : <FileIcon />}
                <span className="text-slate-200 text-sm truncate" title={item.name}>{item.name}</span>
            </div>
            <div className="col-span-3 text-right text-slate-400 text-xs font-mono">{item.modified}</div>
            <div className="col-span-2 text-right text-slate-400 text-xs font-mono">{item.size || '—'}</div>
            <div className="col-span-1"></div>
        </div>
    );
};

export default memo(FileItem);