'use client'

import React from 'react'

interface GlassSelectOption {
  value: string
  label: string
  disabled?: boolean
}

interface GlassSelectProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
  options: GlassSelectOption[]
  className?: string
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
}

export function GlassSelect({
  value,
  onChange,
  placeholder = 'Выберите вариант',
  options,
  className = '',
  size = 'md',
  disabled = false,
}: GlassSelectProps) {
  const sizeClasses = {
    sm: 'h-8 text-xs px-3',
    md: 'h-9 text-sm px-3',
    lg: 'h-11 text-base px-4',
  }

  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      disabled={disabled}
      className={`
        bg-white/5 border border-white/10 text-white rounded-lg 
        hover:border-white/30 hover:bg-white/10 
        focus:border-purple-400/50 focus:ring-2 focus:ring-purple-400/20
        transition-all duration-200 outline-none
        disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-white/10 disabled:hover:bg-white/5
        ${sizeClasses[size]}
        ${className}
      `}
    >
      {placeholder && (
        <option value="" disabled className="bg-gray-800 text-white/60">
          {placeholder}
        </option>
      )}
      {options.map((option) => (
        <option key={option.value} value={option.value} disabled={option.disabled} className="bg-gray-800 text-white">
          {option.label}
        </option>
      ))}
    </select>
  )
}

// Дополнительный компонент для простого использования с children
interface GlassSelectSimpleProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
  children: React.ReactNode
  className?: string
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
}

export function GlassSelectSimple({
  value,
  onChange,
  placeholder,
  children,
  className = '',
  size = 'md',
  disabled = false,
}: GlassSelectSimpleProps) {
  const sizeClasses = {
    sm: 'h-8 text-xs px-3',
    md: 'h-9 text-sm px-3',
    lg: 'h-11 text-base px-4',
  }

  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      disabled={disabled}
      className={`
        bg-white/5 border border-white/10 text-white rounded-lg 
        hover:border-white/30 hover:bg-white/10 
        focus:border-purple-400/50 focus:ring-2 focus:ring-purple-400/20
        transition-all duration-200 outline-none
        disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-white/10 disabled:hover:bg-white/5
        ${sizeClasses[size]}
        ${className}
      `}
    >
      {placeholder && (
        <option value="" disabled className="bg-gray-800 text-white/60">
          {placeholder}
        </option>
      )}
      {children}
    </select>
  )
}
