import { useState } from 'react';
import type { SampleMeta } from '../../../../../widgets/core';
import { MultiInputUI } from '../MultiInputUI';

export const sampleMeta: SampleMeta = {
  id: 'multi-input-base',
  componentId: 'multi-input',
  title: 'Multi Input',
  description: '하나의 값을 여러 입력칸으로 나누어 편집하는 복합 입력 컴포넌트입니다.',
  category: 'Inputs',
  kind: 'base',
  variantLabel: 'Base',
  order: 30,
  features: ['docs'],
};

export function Sample() {
  const [value, setValue] = useState('01012345678');

  return (
    <MultiInputUI
      value={value}
      onChange={(event) => {
        setValue(event.target.value);
      }}
    />
  );
}
