import { TUI_COLORS } from "@/lib/tui/shared/colors";
import type { SessionGroupData } from "@/lib/tui/workspace/workspace-types";
import { SessionGroup } from "./SessionGroup";

interface SessionSidebarProps {
  groups: SessionGroupData[];
  selectedGroupPath: string | null;
  focused?: boolean;
}

export function SessionSidebar({
  groups,
  selectedGroupPath,
  focused = false,
}: SessionSidebarProps) {
  const borderColor = focused ? TUI_COLORS.ui.borderFocused : TUI_COLORS.ui.border;

  return (
    <box
      border
      borderStyle="rounded"
      borderColor={borderColor}
      title="Sessions"
      titleAlignment="left"
      flexDirection="column"
      flexGrow={2}
      minWidth={36}
      gap={1}
      paddingTop={1}
      paddingBottom={1}
    >
      {groups.length === 0 ? (
        <text fg={TUI_COLORS.text.dim} paddingLeft={2}>
          No sessions
        </text>
      ) : (
        groups.map((group) => (
          <SessionGroup
            key={group.projectPath}
            group={group}
            isSelected={group.projectPath === selectedGroupPath}
            sidebarFocused={focused}
          />
        ))
      )}
    </box>
  );
}