import { useLocalStorage } from '@vueuse/core'

export function useShadcnTheme() {
  const appConfig = useAppConfig()
  const color = useLocalStorage('shadcn-theme-color', appConfig.shadcn.color)
  const radius = useLocalStorage(
    'shadcn-theme-radius',
    appConfig.shadcn.radius,
  )

  watch(color, (color) => {
    appConfig.shadcn.color = color
  })
  watch(radius, (radius) => {
    appConfig.shadcn.radius = radius
  })

  return {
    color,
    radius,
  }
}