'use client'

import { useCallback } from 'react'

export default function QSelect({ placeholder, options, disabled = false, dark = false, value, onChange }) {
  // const options = [
  //   { id: 's01', value: 'cat', name: '고양이' },
  //   { id: 's02', value: 'dog', name: '개' },
  //   { id: 's03', value: 'lion', name: '사자' },
  //   { id: 's04', value: 'tiger', name: '호랑이' },
  // ]

  const handleChange = useCallback(
    (e) => {
      onChange(e.target.value)
    },
    [onChange],
  )

  return (
    <select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
      {placeholder && (
        <option value="" disabled hidden>
          {placeholder}
        </option>
      )}
      {options.map((option) => (
        <option key={option.name} value={option.value}>
          {option.name}
        </option>
      ))}
    </select>
  )
}