import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Array as Arr } from "effect";
import { Box, Text } from "ink";
import { memo } from "react";
import { FlowRow } from "./FlowRow.js";
// ============================================================================
// Constants
// ============================================================================
/** Empty list title */
const EMPTY_TITLE = "No flows yet";
/** Empty list hint */
const EMPTY_HINT = "Press [A] to add your first flow";
/** Empty list description */
const EMPTY_DESCRIPTION = "Ghostflow will automatically sync your changes to git.";
// ============================================================================
// Helper Components
// ============================================================================
/** Empty state - centered, friendly message */
const EmptyState = memo(() => (_jsxs(Box, { flexDirection: "column", alignItems: "center", paddingY: 2, children: [_jsx(Text, { children: EMPTY_TITLE }), _jsx(Box, { height: 1 }), _jsx(Text, { dimColor: true, children: EMPTY_HINT }), _jsx(Box, { height: 1 }), _jsx(Text, { dimColor: true, children: EMPTY_DESCRIPTION })] })));
EmptyState.displayName = "EmptyState";
// ============================================================================
// Component
// ============================================================================
/**
 * List of flows with visual selection.
 */
export const FlowList = memo(({ flows, selectedIndex }) => Arr.match(flows, {
    onEmpty: () => _jsx(EmptyState, {}),
    onNonEmpty: (nonEmptyFlows) => (_jsx(Box, { flexDirection: "column", gap: 1, paddingY: 1, children: Arr.map(nonEmptyFlows, (flow, index) => _jsx(FlowRow, { flow: flow, isSelected: index === selectedIndex }, flow.id)) }))
}));
FlowList.displayName = "FlowList";
//# sourceMappingURL=FlowList.js.map