'use client'
import React, { useRef, useState } from 'react'
import Select from 'react-select'
import '@/styles/_inputcommon.scss'
export default function ReactSelect() {
  const selectOption = [
    { label: '김창수', value: '1' },
    { label: '류제영', value: '2' },
    { label: '정상연', value: '3' },
    { label: '안병근', value: '4' },
  ]

  const ref = useRef()

  const [select, setSelect] = useState('')

  //isSearchable 자동완성 검색가능여부
  //isClearable x버튼

  const onSelectionChange = (key) => {
    if (key) {
      setSelect(key.value)
    } else {
      setSelect('')
    }
  }
  return (
    <div>
      <h1 className="title">REACT-SELECT</h1>
      <div className="input-content">
        <div className="input-wrap">
          <h1>REACT-SELECT</h1>
          <div className="select-wrap">
            <Select ref={ref} options={selectOption} onChange={onSelectionChange} isSearchable={false} placeholder="선택하세요" isClearable={true} />
          </div>
        </div>
      </div>
    </div>
  )
}