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

export function RangeDemo() {
  const [range, setRange] = useState<{ start?: Date; end?: Date }>(() => {
    const today = new Date();
    return {
      start: new Date(today.getFullYear(), today.getMonth(), 10),
      end: new Date(today.getFullYear(), today.getMonth() + 1, 21),
    };
  });

  return (
    <div>
      <Calendar
        selectionMode="range"
        monthsToDisplay={2}
        selected={range}
        onChange={(r) => setRange(r as { start?: Date; end?: Date })}
      />
      <div className="mt-4 text-sm text-gray-600">
        Range: <span className="font-semibold text-gray-900">
          {range.start ? range.start.toLocaleDateString() : 'Start'} – {range.end ? range.end.toLocaleDateString() : 'End'}
        </span>
      </div>
    </div>
  );
}