/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * BehaviorSelector Component
 *
 * Allows users to select AI response behavior mode.
 */

import * as React from 'react';
import type { BehaviorMode } from '../../types';

interface BehaviorSelectorProps {
    value: BehaviorMode;
    onChange: (mode: BehaviorMode) => void;
}

const BEHAVIOR_OPTIONS: { value: BehaviorMode; label: string; description: string }[] = [
    { value: 'precise', label: 'Precise', description: 'Factual, deterministic responses' },
    { value: 'balanced', label: 'Balanced', description: 'Balanced creativity and accuracy' },
    { value: 'creative', label: 'Creative', description: 'More creative, varied responses' },
];

/**
 * BehaviorSelector component for choosing AI response style.
 */
export const BehaviorSelector: React.FC<BehaviorSelectorProps> = ({ value, onChange }) => {
    return (
        <div className="behavior-selector">
            <label className="behavior-selector__label">Response Style:</label>
            <div className="behavior-selector__options">
                {BEHAVIOR_OPTIONS.map((option) => (
                    <button
                        key={option.value}
                        className={`behavior-selector__option ${value === option.value ? 'behavior-selector__option--active' : ''}`}
                        onClick={() => onChange(option.value)}
                        title={option.description}
                        aria-pressed={value === option.value}
                    >
                        {option.label}
                    </button>
                ))}
            </div>
        </div>
    );
};
