'use client'

import React, { useRef, useState } from 'react'
import Select from 'react-select'

export default function ReactSelect(){
    const selectOption = [
        { label: '김창수김창수김창수김창수김창수김창수김창수김창수김창수', value: '1' },
        { label: '敬称選択', value: '2' },
        { label: '敬称選択', value: '3' },
        { label: '敬称選択', value: '5' },
        { label: '敬称選択', value: '6' },

    ]
    
    const ref = useRef()
    
    const [select, setSelect] = useState('')
    
      //isSearchable 자동완성 검색가능여부
      //isClearable x버튼
    
    const onSelectionChange = (key) => {
        if (key) {
        setSelect(key.value)
        } else {
        setSelect('')
        }
    }

    return(
        <Select 
            ref={ref} 
            className='react-select-custom' 
            classNamePrefix='custom'
            options={selectOption} 
            onChange={onSelectionChange} 
            isSearchable={false} 
            placeholder="敬称選択" 
            isClearable={true} 
            // isDisabled={true}
        />
    )
}