import { OptionPanelProps } from '@components/DesignPanel/types';
import { useSelect } from '@wordpress/data';
import { ChapterDivider } from '@components/ui/ChapterDivider';

export const BitesGroups: React.FC<OptionPanelProps> = ({
  activeOptionValue,
}) => {
  const utilClasses = useSelect(
    (select) => {
      // @ts-ignore
      const utils = select('biteStore/editor').getUtilById(activeOptionValue);
      let tw = [];
      if (utils?.tw) {
        tw = utils.tw.split(' ');
      }
      return tw;
    },
    [activeOptionValue]
  );

  return (
    <div key={`BitesId`}>
      <ChapterDivider title={`BitesId ${activeOptionValue}`} className="mb-4" />
      {utilClasses.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {utilClasses.map((twClass, index) => (
            <span
              key={`${twClass}${index}`}
              className="rounded-full bg-wordpress p-1 text-white"
            >
              {twClass}
            </span>
          ))}
        </div>
      )}
    </div>
  );
};

export default BitesGroups;