import { MultiMonthCalendar } from "@/components/ruixen/multi-month-calendar";
import { useState } from "react";
import { DateRange } from "react-day-picker";
 
export default function App() {
  const [range, setRange] = useState<DateRange | undefined>();
  const [single, setSingle] = useState<Date | undefined>();
 
  return (
    <div className="space-y-6">
      {/* Range Mode */}
      <MultiMonthCalendar
        numberOfMonths={3}
        mode="range"
        selected={range}
        onSelect={(date) => setRange(date)}
      />
 
      {/* Single Mode */}
      <MultiMonthCalendar
        numberOfMonths={2}
        mode="single"
        selected={single}
        onSelect={(date) => setSingle(date)}
      />
    </div>
  );
}