Date picker

import { useState } from 'react';
import { Popover } from '@base-ui/react/popover';

const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
const MONTH_YEAR = { month: 'long', year: 'numeric' } as const;
const FULL_DATE = { weekday: 'short', month: 'short', day: 'numeric' } as const;

export function PublishDatePicker() {
  const today = new Date(new Date().setHours(0, 0, 0, 0));
  const [page, setPage] = useState(0); // months after the current one
  const [selected, setSelected] = useState<Date>();
  const [y, m] = [today.getFullYear(), today.getMonth() + page];
  const count = new Date(y, m + 1, 0).getDate(); // days in this month
  const days = Array.from({ length: count }, (_, i) => new Date(y, m, i + 1));
  const blanks = new Date(y, m, 1).getDay(); // empty cells before the 1st

  return (
    <Popover.Root>
      <Popover.Trigger className='h-10 w-56 rounded-lg border px-3 text-left text-sm'>
        {selected?.toLocaleDateString('en-US', FULL_DATE) ?? 'Pick a date'}
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner align='start' sideOffset={6}>
          <Popover.Popup className='grid w-72 grid-cols-7 gap-1 rounded-xl border bg-background p-3 text-center text-sm shadow-lg [&>span]:text-xs [&>span]:text-muted-foreground'>
            <button
              onClick={() => setPage(page - 1)}
              aria-label='Previous month'
            >
              ‹
            </button>
            <Popover.Title className='col-span-5 font-medium'>
              {new Date(y, m).toLocaleDateString('en-US', MONTH_YEAR)}
            </Popover.Title>
            <button onClick={() => setPage(page + 1)} aria-label='Next month'>
              ›
            </button>
            {WEEKDAYS.map((weekday) => (
              <span key={weekday}>{weekday}</span>
            ))}
            {blanks > 0 && <i style={{ gridColumn: `span ${blanks}` }} />}
            {days.map((day) => (
              // Popover.Close picks the day and closes the calendar in one click.
              <Popover.Close
                key={day.getDate()}
                disabled={day < today}
                onClick={() => setSelected(day)}
                data-selected={+day === +(selected ?? 0) || undefined}
                className='h-9 rounded-md tabular-nums enabled:not-data-selected:hover:bg-muted disabled:opacity-30 data-selected:bg-blue-600 data-selected:text-white'
              >
                {day.getDate()}
              </Popover.Close>
            ))}
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}