'use client'

import { Calendar } from 'lucide-react'
import * as React from 'react'

interface GlassDatePickerProps {
  value?: string
  onChange?: (date: string) => void
  placeholder?: string
  className?: string
  disabled?: boolean
}

export function GlassDatePicker({
  value,
  onChange,
  placeholder: _placeholder = 'дд.мм.гггг',
  className = '',
  disabled = false,
}: GlassDatePickerProps) {
  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange?.(e.target.value)
  }

  return (
    <div className="relative" data-testid="glass-date-picker-wrapper">
      <input
        type="date"
        value={value}
        onChange={handleDateChange}
        disabled={disabled}
        data-testid="glass-date-picker-input"
        className={`
          bg-white/5 border border-white/10 text-white rounded-lg h-9 px-3 text-sm
          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
          pr-8
          ${className}
        `}
      />
      <Calendar className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40 pointer-events-none" />
    </div>
  )
}
