Event Calendar

import { useMemo, useState } from 'react'
import { EventCalendar, type CalendarEvent, type EventCalendarView } from '@otfdashkit/ui'

const CHART_COLORS = [
  'hsl(var(--chart-1))',
  'hsl(var(--chart-2))',
  'hsl(var(--chart-3))',
  'hsl(var(--chart-4))',
  'hsl(var(--chart-5))',
] as const

function at(day: Date, hour: number, minute = 0): Date {
  const d = new Date(day)
  d.setHours(hour, minute, 0, 0)
  return d
}

function addDays(d: Date, days: number): Date {
  const next = new Date(d)
  next.setDate(next.getDate() + days)
  return next
}

function startOfMonth(d: Date): Date {
  const next = new Date(d)
  next.setDate(1)
  next.setHours(0, 0, 0, 0)
  return next
}

function buildMonthEvents(refDate: Date): CalendarEvent[] {
  const m = startOfMonth(refDate)
  const titles = [
    'Design review',
    'Standup',
    'Customer interview',
    '1:1 with Priya',
    'Marketing sync',
    'Roadmap planning',
    'Lunch w/ Theo',
    'Gym',
    'Sprint demo',
    'Investor update',
    'Onboarding call',
    'Hack night',
  ]
  const offsets = [2, 4, 5, 8, 10, 12, 14, 17, 19, 22, 24, 27]
  return titles.map((title, i) => {
    const day = addDays(m, offsets[i])
    return {
      id: `m-${i}`,
      title,
      start: at(day, 9 + (i % 6)),
      end: at(day, 10 + (i % 6)),
      color: CHART_COLORS[i % CHART_COLORS.length],
    }
  })
}

export function Example() {
  const today = useMemo(() => new Date(), [])
  const [view, setView] = useState<EventCalendarView>('month')
  const events = useMemo(() => buildMonthEvents(today), [today])
  return (
    <EventCalendar
      events={events}
      view={view}
      onViewChange={setView}
      defaultDate={today}
    />
  )
}