Toggle

'use client';
import { useEffect, useRef, useState } from 'react';
import { Toggle, type ToggleSize, type ToggleShape } from '@mbsw/ui';
import { Plus, ChevronDown } from 'lucide-react';
import { Icon } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "trailingIcon": false,
    "pressed": true,
    "label": "Text",
    "size": "md",
    "shape": "square",
    "disabled": false
  };
  const [pressed, setPressed] = useState(settings.pressed);
  const previousSetting = useRef(settings.pressed);
  useEffect(() => {
    if (previousSetting.current === settings.pressed) return;
    previousSetting.current = settings.pressed;
    setPressed(settings.pressed);
  }, [settings.pressed]);
  return (
    <Toggle
      leading={
        settings.leadingIcon ? (
          <Icon icon={Plus} size="sm" decorative />
        ) : undefined
      }
      trailing={
        settings.trailingIcon ? (
          <Icon icon={ChevronDown} size="sm" decorative />
        ) : undefined
      }
      pressed={pressed}
      onPressedChange={(next) => {
        setPressed(next);
      }}
      size={settings.size as ToggleSize}
      shape={settings.shape as ToggleShape}
      disabled={settings.disabled}
    >
      {settings.label}
    </Toggle>
  );
}