import { useState } from 'react';
import { Calendar } from 'react-modular-datepicker';
import 'react-modular-datepicker/dist/index.css';

export function BasicDemo() {
  const [selected, setSelected] = useState<Date | null>(new Date());

  return (
    <div>
      <Calendar
        selected={selected || undefined}
        onChange={(d) => setSelected(d as Date)}
      />
      {selected && (
        <div className="mt-4 text-sm text-gray-600">
          Selected: <span className="font-semibold text-gray-900">{selected.toDateString()}</span>
        </div>
      )}
    </div>
  );
}