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

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

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

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

  return (
    <CheckComboUI
      data={data}
      value={value}
      placeholder="센터명을 검색하고 다중 선택하세요"
      onChange={(nextCodes) => {
        setValue(nextCodes);
      }}
    />
  );
}
