import { ContentEditable } from "@common/components/ContentEditable";
import { useInputCallback } from "@common/hooks/useInputCallback";
import clsx from "clsx";
import styles from "../../assets/settings-modal.module.css";
import { useAppState } from "../../contexts/state";

export const SystemInstructionSettings = () => {
    const { systemInstruction, dispatch } = useAppState();

    const setInstructionValue = useInputCallback((value) => {
        dispatch({ type: "SET_SYSTEM_INSTRUCTION", systemInstruction: value });
    }, []);

    return (
        <div class={styles.form}>
            <div class={clsx(styles.formGroup, styles.formGroupFill)}>
                <label class={styles.label}>System Instruction</label>
                <ContentEditable
                    highlight
                    value={systemInstruction}
                    onInput={setInstructionValue}
                    placeholder="Enter system instruction for the AI assistant..."
                    class={clsx(styles.input, styles.textarea)}
                />
            </div>
        </div>
    );
};
