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

export const sampleMeta: SampleMeta = {
  id: 'popup-input-base',
  componentId: 'popup-input',
  title: 'Popup Input',
  description: '검색 버튼과 결과 필드를 함께 제공하는 팝업형 입력 컴포넌트입니다.',
  category: 'Inputs',
  kind: 'base',
  variantLabel: 'Base',
  order: 40,
  features: ['docs'],
};

export function Sample() {
  const [value, setValue] = useState('납품처');
  const [result, setResult] = useState('서울 물류센터');

  return (
    <PopupUI
      type="search"
      value={value}
      resultValue={result}
      inputPlaceholder="검색어 입력"
      onChange={(event) => {
        setValue(event.target.value);
      }}
      onButtonClick={() => {
        setResult(value ? `${value} 선택 결과` : '선택 결과 없음');
      }}
    />
  );
}
