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

export const sampleMeta: SampleMeta = {
  id: 'button-editable-input-base',
  componentId: 'button-editable-input',
  title: 'Button Editable Input',
  description: '버튼을 눌러 읽기 전용 입력값을 수정 가능한 상태로 전환하는 컴포넌트입니다.',
  category: 'Inputs',
  kind: 'base',
  variantLabel: 'Base',
  order: 50,
  features: ['docs'],
};

export function Sample() {
  const [value, setValue] = useState('운영팀 공용 메모');

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