import React from 'react';
import { Dropdown } from 'primereact/dropdown';

export type SystemType = 'council' | 'fusemind' | 'canvas';

interface SystemSelectorProps {
    value: SystemType | null;
    onChange: (value: SystemType | null) => void;
}

const systemOptions = [
    { label: 'CouncilAI', value: 'council' },
    { label: 'FuseMind (AI)', value: 'fusemind' },
    { label: 'Canvas API', value: 'canvas' }
];

const SystemSelector: React.FC<SystemSelectorProps> = ({ value, onChange }) => {
    return (
        <div className="flex flex-col gap-2 p-4 border-b w-80">
            <span className="font-semibold mb-1">Apps & Flows</span>
            <Dropdown
                value={value}
                options={systemOptions}
                onChange={(e) => onChange(e.value)}
                placeholder="Select an integration"
                className="w-full"
                showClear
            />
        </div>
    );
};

export default SystemSelector;