/**
 * GlassSelect 组件
 * 毛玻璃下拉选择框样式
 * @param {Object} props
 * @param {string} props.label - 标签文本
 * @param {Array<{value: string, label: string}>} props.options - 选项数组
 * @param {string} props.value - 当前选中值
 * @param {Function} props.onChange - 值变化处理函数
 * @param {string} props.className - 额外的CSS类名
 * @param {string} props.id - 选择框ID
 */
const GlassSelect = ({ 
  label,
  options = [],
  value,
  onChange,
  className = '',
  id
}) => {
  return (
    <div className={`flex flex-col gap-2 ${className}`}>
      {label && (
        <label 
          htmlFor={id}
          className="text-[10px] text-white/30 uppercase tracking-widest font-bold"
        >
          {label}
        </label>
      )}
      <select
        id={id}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="glass-input w-full appearance-none cursor-pointer"
      >
        {options.map((option) => (
          <option 
            key={option.value} 
            value={option.value}
            className="bg-[#0a0c10] text-white"
          >
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default GlassSelect;
