import React, { useMemo } from 'react';
import { Box, Text } from 'ink';
// Memoized individual model item to prevent re-renders
const ModelItem = React.memo(function ModelItem({ model, isSelected, }) {
    return (React.createElement(Box, { paddingLeft: 1 },
        React.createElement(Text, { color: isSelected ? 'black' : 'white', backgroundColor: isSelected ? 'cyan' : undefined }, model)));
});
export const ModelSelection = React.memo(function ModelSelection({ models, selectedIndex, isVisible, currentModel, }) {
    // Early return for invisible state
    if (!isVisible)
        return null;
    // Memoize header text to prevent re-computation
    const headerText = useMemo(() => `Select Grok Model (current: ${currentModel}):`, [currentModel]);
    return (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
        React.createElement(Box, { marginBottom: 1 },
            React.createElement(Text, { color: "cyan" }, headerText)),
        models.map((modelOption, index) => (React.createElement(ModelItem, { key: modelOption.model, model: modelOption.model, isSelected: index === selectedIndex }))),
        React.createElement(Box, { marginTop: 1 },
            React.createElement(Text, { color: "gray", dimColor: true }, "\u2191\u2193 navigate \u2022 Enter/Tab select \u2022 Esc cancel"))));
});
//# sourceMappingURL=ModelSelection.js.map