/**
 * GlassInput 组件
 * 毛玻璃输入框样式
 * @param {Object} props
 * @param {string} props.label - 标签文本
 * @param {string} props.type - 输入类型
 * @param {string} props.placeholder - 占位符文本
 * @param {string} props.value - 输入值
 * @param {Function} props.onChange - 值变化处理函数
 * @param {number} props.maxLength - 最大长度
 * @param {string} props.className - 额外的CSS类名
 * @param {string} props.id - 输入框ID
 */
const GlassInput = ({ 
  label,
  type = 'text',
  placeholder = '',
  value,
  onChange,
  maxLength,
  className = '',
  id
}) => {
  // 日期类型输入框的特殊样式
  const dateInputClass = type === 'date' 
    ? 'cursor-pointer [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-100 [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:top-0 [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:bg-transparent'
    : '';

  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>
      )}
      <div className={type === 'date' ? 'relative' : ''}>
        <input
          id={id}
          type={type}
          placeholder={placeholder}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          maxLength={maxLength}
          className={`glass-input w-full focus:ring-2 focus:ring-orange-200/50 ${dateInputClass}`}
        />
      </div>
    </div>
  );
};

export default GlassInput;
