import React, { useState } from 'react';
import {Icon, calendar } from '@wordpress/icons'; // Make sure to use the correct import

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

    // Sorting function
    const handleSort = () => {
        if (sort === 'asc') {
            updateData(colId, 'desc'); // Assuming updateData is a function to set sort direction
        } else {
            updateData(colId, 'asc');
        }
    };

    return (
        <div className="lcp-data-grid-column-header" style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>

            {/* Calendar Icon */}
            <span style={{ marginRight: '8px', display: 'inline-block' }}>
                <Icon icon={ calendar } />

            </span>

            {/* Editable Header Text */}
            <span 
                style={{ fontWeight: 'bold', fontSize: '16px' }}
                onClick={handleSort} // Click header for sorting
            >
                {displayName}
            </span>

            {/* Sorting Indicators */}
            <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;