Date Picker

<!-- Date Picker -->
<div class="lyd-datepicker">
    <input type="text" class="lyd-datepicker-input" 
           placeholder="Select date" readonly>
    <svg class="lyd-datepicker-icon">...</svg>
    
    <div class="lyd-calendar">
        <div class="lyd-calendar-header">
            <button class="lyd-calendar-nav-btn">‹</button>
            <div class="lyd-calendar-title">September 2025</div>
            <button class="lyd-calendar-nav-btn">›</button>
        </div>
        
        <div class="lyd-calendar-weekdays">
            <div class="lyd-calendar-weekday">Su</div>
            <!-- ... more weekdays ... -->
        </div>
        
        <div class="lyd-calendar-grid">
            <button class="lyd-calendar-day">1</button>
            <!-- ... more days ... -->
        </div>
    </div>
</div>

import { useState, useRef, useEffect } from 'react';

interface DatePickerProps {
  label?: string;
  value?: Date;
  onChange?: (date: Date) => void;
  minDate?: Date;
  maxDate?: Date;
  placeholder?: string;
}

export const DatePicker = ({
  label,
  value,
  onChange,
  minDate,
  maxDate,
  placeholder = 'Select date'
}: DatePickerProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState(value || new Date());
  const ref = useRef(null);
  
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);
  
  const formatDate = (date: Date) => {
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };
  
  return (
    <div className="lyd-input-group">
      {label && <label className="lyd-input-label">{label}</label>}
      <div className="lyd-datepicker" ref={ref}>
        <input
          type="text"
          className="lyd-datepicker-input"
          value={value ? formatDate(value) : ''}
          placeholder={placeholder}
          readOnly
          onClick={() => setIsOpen(!isOpen)}
        />
        <svg className="lyd-datepicker-icon" viewBox="0 0 24 24">
          <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        
        {isOpen && (
          <Calendar
            selectedDate={selectedDate}
            onDateSelect={(date) => {
              setSelectedDate(date);
              onChange?.(date);
              setIsOpen(false);
            }}
            minDate={minDate}
            maxDate={maxDate}
          />
        )}
      </div>
    </div>
  );
};