'use client'
import { useState } from 'react'

export default function QSelectBox({ title = '', options, onChange }) {
  const [openSelect, setOpenSelect] = useState(false)
  const [selected, setSelected] = useState(title === '' ? options[0].name : title)

  const handleClickSelectOption = (option) => {
    setSelected(option.name)
    onChange?.(option)
  }

  return (
    <div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={() => setOpenSelect(!openSelect)}>
      <p>{selected}</p>
      <ul className="select-item-wrap">
        {options?.map((option) => (
          <li key={option.id} className="select-item">
            <button onClick={() => handleClickSelectOption(option)}>{option.name}</button>
          </li>
        ))}
      </ul>
    </div>
  )
}