import React from 'react';
import Select, { components } from 'react-select';
import Tooltip from '../../../components/core/Tooltip'; // Adjust path

const EcreSocialSelect = ({
  id, label, options, components, value, onChange, width, classNamePrefix, isSearchable,
  placeholder, isMulti, tooltip, marginTop, isPro = true
}) => {
  const handleChange = (selectedOption) => {
    onChange(selectedOption); // Handle multi or single select change
  };

  const formatValue = (value) => {
    if (isMulti) {
      return options.filter(option => value.some(v => v.value === option.value));
    } else {
      return options.find(option => option.value === value) || null;
    }
  };

  const isOptionDisabled = (option) => ['Messenger', 'Linkedin', 'Twitter', 'Gmail', 'Line', 'Outlook', 'WeChat', 'Telegram', 'Skype', 'Trello'].includes(option.value);

  return (
    <div className={`select-social-wrapper ${marginTop || ''}`}>
      <label htmlFor={id} className="ecre-text-sm ecre-font-medium ecre-block ecre-mb-2">
        <span className="ecre-mr-2.5">{label}</span>
        {tooltip && <Tooltip className="ecre-align-[-2px]" content={tooltip} />}
      </label>
      <Select
        id={id}
        className={`echorewards-react-select ecre-max-w-${width}`}
        classNamePrefix={classNamePrefix}
        value={formatValue(value)}
        onChange={handleChange}
        options={options}
        components={components}
        isSearchable={isSearchable}
        placeholder={placeholder}
        isMulti={isMulti}
        {...(!isPro && { isOptionDisabled })}
      />
    </div>
  );
};

export default EcreSocialSelect;