/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React from 'react';
import {AdvancedSelect, IAdvancedSelectItem} from '../ui/advanced-select';
import {Label} from '../forms/label';

interface CapabilitiesProps {
  label: string;
  labelColor?: string;
  iconColor?: string;
  capabilitiesSetTitle: string;
  selectedItems: IAdvancedSelectItem[];
  setSelectedItems: (items: IAdvancedSelectItem[]) => void;
}

export const Capabilities: React.FC<CapabilitiesProps> = ({
  label,
  labelColor,
  iconColor,
  capabilitiesSetTitle,
  selectedItems,
  setSelectedItems
}) => {
  // Mock capabilities data - in a real app this would come from constants/capabilities
  const mockCapabilities: IAdvancedSelectItem[] = [
    { value: 'streaming', text: 'Streaming' },
    { value: 'recording', text: 'Recording' },
    { value: 'analytics', text: 'Analytics' },
    { value: 'transcoding', text: 'Transcoding' }
  ];

  return (
    <div>
      <Label text={label} />
      <AdvancedSelect
        items={mockCapabilities}
        selectedItems={selectedItems}
        setSelectedItems={setSelectedItems}
        placeholder={`Select ${capabilitiesSetTitle} capabilities...`}
      />
    </div>
  );
};