import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../../utils/cn.js';
import { useGanttContext } from './GanttChart.js';
import { GanttTableHeader } from './GanttTableHeader.js';
import { GanttTableGroupRow } from './GanttTableGroupRow.js';
import { GanttTableTaskRow } from './GanttTableTaskRow.js';

const GanttTablePanel = forwardRef(({ onScroll }, ref) => {
    const { theme, rows, tablePanelWidth } = useGanttContext();
    return (jsxs("div", { className: cn(theme.tablePanelStyle), style: { width: tablePanelWidth }, children: [jsx(GanttTableHeader, {}), jsx("div", { ref: ref, className: "overflow-y-auto overflow-x-hidden flex-1 min-h-0", onScroll: onScroll, children: rows.map((row, i) => {
                    if (row.type === "group") {
                        return (jsx(GanttTableGroupRow, { row: row }, `group-${row.group.id}`));
                    }
                    return (jsx(GanttTableTaskRow, { task: row.task, group: row.group }, `task-${row.task.id}`));
                }) })] }));
});
GanttTablePanel.displayName = "GanttTablePanel";

export { GanttTablePanel };
