import { IconDraggable, Select } from '@/components';
import { Toggler, TSelectOption } from '@/components/inputs';
import { RULES_DATA } from '@/stories/rules/Rules.data';

export type TDndTraitProps = {
  title: string;
  toggleAction: () => void;
};

const selectOptions = RULES_DATA.reduce((rules: TSelectOption[], rule) => {
  rules.push({ value: rule.value, label: rule.text, icon: rule.icon, fieldColor: rule.color });

  return rules;
}, []);

export function DndTrait({ title, toggleAction }: TDndTraitProps) {
  return (
    <div className="rounded-[3px] pr-[15px] pl-[8px] flex items-center">
      <IconDraggable className="mr-3" />
      <span>{title}</span>
      <span className="ml-auto">
        <Select options={selectOptions} defaultValue={selectOptions[0]} size="sm" onSelect={() => {}} />
      </span>
      <span className="ml-4">
        <Toggler theme={'light'} onChange={toggleAction} />
      </span>
    </div>
  );
}