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

export function MultipleDemo() {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth();

  const [dates, setDates] = useState<Date[]>([
    new Date(year, month, 8),
    new Date(year, month, 19),
    new Date(year, month, 23),
  ]);

  return (
    <div>
      <Calendar
        selectionMode="multiple"
        selected={dates}
        onChange={(d) => setDates(d as Date[])}
      />
      <div className="mt-4 text-sm text-gray-600 text-center">
        Selected ({dates.length} dates):
        <div className="flex flex-wrap gap-1 justify-center mt-2 max-w-md">
          {dates.map((d, i) => (
            <span key={i} className="px-2 py-0.5 rounded bg-gray-100 text-xs font-mono">
              {d.toLocaleDateString()}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}