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

const data = [
  { code: 'WH-001', value: '서울 물류센터' },
  { code: 'WH-002', value: '김포 물류센터' },
  { code: 'WH-003', value: '부산 물류센터' },
  { code: 'WH-004', value: '대전 허브센터' },
];

export const sampleMeta: SampleMeta = {
  id: 'select-input-base',
  componentId: 'select-input',
  title: 'Select Input',
  description: 'code/value 데이터를 받아 code를 값으로 유지하는 필터형 select combo 샘플입니다.',
  category: 'Inputs',
  kind: 'base',
  variantLabel: 'Base',
  order: 41,
  features: ['docs'],
};

export function Sample() {
  const [value, setValue] = useState<string | undefined>('WH-001');

  return (
    <SelectUI
      data={data}
      value={value}
      placeholder="센터명을 검색하세요"
      onChange={(nextCode) => {
        setValue(nextCode);
      }}
    />
  );
}
