'use client'

import { getCalApi } from '@calcom/embed-react'
import { useEffect } from 'react'
import { cn } from '@/lib/utils'

const CAL_ORIGIN = 'https://scheduling.letsbe.solutions'
const CAL_LINK = 'matt-ciaccio/letsbe'
const CAL_NAMESPACE = 'letsbe'

interface CalButtonProps {
  children: React.ReactNode
  className?: string
  style?: React.CSSProperties
}

export default function CalButton({ children, className, style }: CalButtonProps) {
  useEffect(() => {
    ;(async () => {
      const cal = await getCalApi({ namespace: CAL_NAMESPACE })
      cal('init', CAL_NAMESPACE, { origin: CAL_ORIGIN })
      cal('ui', {
        hideEventTypeDetails: false,
        layout: 'month_view',
        cssVarsPerTheme: {
          light: { 'cal-brand': '#006494' },
          dark: { 'cal-brand': '#5BA4D9' },
        },
      })
    })()
  }, [])

  return (
    <button
      data-cal-link={CAL_LINK}
      data-cal-namespace={CAL_NAMESPACE}
      data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true"}'
      className={cn(className)}
      style={style}
    >
      {children}
    </button>
  )
}
