Range Calendar

import { cn } from '@/lib/cn'
import { Calendar } from '@/components/ui/calendar'

type RangeCalendarProps = {
  class?: string
  startMonth?: Date | string
  endMonth?: Date | string
  [key: string]: unknown
}

function normalizeMonth(value: Date | string | undefined, fallback: Date): Date {
  if (!value) return fallback
  const date = value instanceof Date ? value : new Date(value)
  if (Number.isNaN(date.getTime())) return fallback
  return new Date(date.getFullYear(), date.getMonth(), 1)
}

function addMonth(value: Date): Date {
  return new Date(value.getFullYear(), value.getMonth() + 1, 1)
}

export function RangeCalendar(props: RangeCalendarProps) {
  const baseMonth = normalizeMonth(props.startMonth, new Date())
  const nextMonth = normalizeMonth(props.endMonth, addMonth(baseMonth))
  const { class: className, startMonth, endMonth, ...rest } = props

  return (
    <div class={cn('grid gap-4 md:grid-cols-2', className)} {...rest}>
      <Calendar month={baseMonth} />
      <Calendar month={nextMonth} />
    </div>
  )
}