Checkbox

'use client';
import { useEffect, useRef, useState } from 'react';
import { Checkbox, type CheckboxShape } from '@mbsw/ui';
export default function Demo() {
  const settings = {
    "selection": "checked",
    "shape": "square",
    "disabled": false
  };
  const initial =
    settings.selection === 'indeterminate'
      ? 'indeterminate'
      : settings.selection === 'checked';
  const [checked, setChecked] = useState<boolean | 'indeterminate'>(initial);
  const previousSetting = useRef(initial);
  useEffect(() => {
    if (previousSetting.current === initial) return;
    previousSetting.current = initial;
    setChecked(initial);
  }, [initial]);
  return (
    <Checkbox
      aria-label={"선택"}
      checked={checked}
      onCheckedChange={(next) => {
        setChecked(next);
        const selection =
          next === 'indeterminate'
            ? 'indeterminate'
            : next
              ? 'checked'
              : 'unchecked';
      }}
      disabled={settings.disabled}
      shape={settings.shape as CheckboxShape}
    />
  );
}