import { useState } from 'react';
import { useDates } from 'react-modular-datepicker';

export function HeadlessDemo() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
  const { calendars, getBackProps, getForwardProps, getDateProps } = useDates({
    selected: selectedDate,
    onChange: (d) => setSelectedDate(d as Date),
  });

  const calendar = calendars[0];
  if (!calendar) return null;

  return (
    <div className="w-full max-w-md bg-white rounded-xl border p-4 shadow">
      <div className="flex items-center justify-between mb-4">
        <button {...getBackProps({ calendars })} className="p-2 rounded hover:bg-gray-100 text-sm font-bold">
          ← Prev
        </button>
        <span className="font-bold">
          {new Date(calendar.year, calendar.month).toLocaleString('default', { month: 'long', year: 'numeric' })}
        </span>
        <button {...getForwardProps({ calendars })} className="p-2 rounded hover:bg-gray-100 text-sm font-bold">
          Next →
        </button>
      </div>
      <div className="grid grid-cols-7 gap-1 text-center font-bold text-xs text-gray-500 mb-2">
        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
          <div key={d}>{d}</div>
        ))}
      </div>
      <div className="grid grid-cols-7 gap-1">
        {calendar.weeks.flat().map((dateObj, idx) => {
          if (!dateObj) return <div key={idx} />;
          return (
            <button
              key={idx}
              {...getDateProps({ dateObj })}
              className={`h-9 w-9 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${
                dateObj.selected
                  ? 'bg-blue-600 text-white font-bold'
                  : dateObj.today
                    ? 'border border-blue-500 text-blue-600'
                    : 'hover:bg-gray-100'
              }`}
            >
              {dateObj.date.getDate()}
            </button>
          );
        })}
      </div>
    </div>
  );
}