import { useState } from 'react';
import type { SampleMeta } from '../../../../../widgets/core';
import { InputUI } from '../InputUI';
import './BaseSample.css';

export const sampleMeta: SampleMeta = {
  id: 'input-base',
  componentId: 'input',
  title: 'Base Input',
  description: '입력 중에는 draft 상태를 유지하고 Enter 또는 blur 시점에 값을 확정하는 기본형 InputUI 샘플입니다.',
  category: 'Inputs',
  kind: 'base',
  variantLabel: 'Base',
  order: 20,
  features: ['docs'],
};

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

  return (
    <div className="input-base-sample-preview">
      <InputUI
        className="input-base-sample-preview__control"
        value={value}
        placeholder="입력 후 Enter 또는 blur"
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}
