セレクトボックス・コンボボックス（Select / Combobox）

'use client';
import { useState } from 'react';
import ReactSelect, { MultiValue, SingleValue } from 'react-select';

type Option = { value: string; label: string };

const languageOptions: Option[] = [
  { value: 'javascript', label: 'JavaScript' },
  { value: 'typescript', label: 'TypeScript' },
  { value: 'python', label: 'Python' },
  { value: 'go', label: 'Go' },
  { value: 'rust', label: 'Rust' },
];

const groupedOptions = [
  {
    label: 'フロントエンド',
    options: [
      { value: 'javascript', label: 'JavaScript' },
      { value: 'typescript', label: 'TypeScript' },
    ],
  },
  {
    label: 'バックエンド',
    options: [
      { value: 'python', label: 'Python' },
      { value: 'go', label: 'Go' },
      { value: 'rust', label: 'Rust' },
    ],
  },
];

export function ReactSelectDemo() {
  const [single, setSingle] = useState<SingleValue<Option>>(null);
  const [multi, setMulti] = useState<MultiValue<Option>>([]);

  return (
    <div className="flex flex-col gap-4 max-w-xs">
      {/* 単一選択（検索・クリアボタン付き） */}
      <ReactSelect
        placeholder="言語を選択..."
        options={languageOptions}
        value={single}
        onChange={setSingle}
        isClearable
        isSearchable
      />

      {/* 複数選択 */}
      <ReactSelect
        placeholder="複数選択可..."
        options={languageOptions}
        value={multi}
        onChange={setMulti}
        isMulti
        isClearable
        closeMenuOnSelect={false}
      />

      {/* グループ化オプション */}
      <ReactSelect
        placeholder="カテゴリから選択..."
        options={groupedOptions}
        isClearable
      />

      {/* 無効状態 */}
      <ReactSelect
        placeholder="選択不可"
        options={languageOptions}
        isDisabled
      />
    </div>
  );
}