import React, { useState } from 'react';

const LCPDataGridHeader = (props) => {
    const { displayName, column, updateData, sort, menu } = props;

    const [editing, setEditing] = useState(false);
    const [newHeader, setNewHeader] = useState(displayName);
    const colId = column.colId;
    const handleEditClick = () => {
        setEditing(true);
    };

    const handleBlur = () => {
        setEditing(false);
        if (updateData && typeof updateData === 'function') {
            updateData(newHeader); // Save the new header name
        }
    };

    const handleChange = (e) => {
        setNewHeader(e.target.value);
    };

    return (
        <div className="custom-header">

            {/* Column ID 
            <div>
            <span style={{ marginRight: '8px' }}>
                <strong>{colId}</strong>
            </span>
            </div>*/}
            {/* Editable Header Text */}
                        {/* Icon */}
                        <span style={{ marginRight: '8px' }}>
                <img src="your-icon-path.svg" alt="icon" style={{ width: '20px', height: '20px' }} />
            </span>
            {editing ? (
                <input
                    type="text"
                    value={newHeader}
                    onBlur={handleBlur}
                    onChange={handleChange}
                    style={{ fontSize: '14px', padding: '2px 5px', width: '100%' }}
                />
            ) : (
                <span
                    onClick={handleEditClick}
                    style={{ cursor: 'pointer', fontWeight: 'bold', fontSize: '16px' }}
                >
                    {newHeader}
                </span>
            )}

            {/* Sorting *
            <span style={{ marginLeft: '8px' }}>
                {sort === 'asc' && <span>↑</span>}
                {sort === 'desc' && <span>↓</span>}
            </span> */}

            {/* Additional Menu *
            <span style={{ marginLeft: '8px' }}>
                <button onClick={menu}>Menu</button>
            </span> */}
        </div>
    );
};

export default LCPDataGridHeader;