import type { ReactNode } from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export type Theme = "light" | "dark" | "system"

export function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "vite-ui-theme",
}: {
  children: ReactNode
  defaultTheme?: Theme
  storageKey?: string
}) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme={defaultTheme}
      enableSystem
      storageKey={storageKey}
      disableTransitionOnChange
    >
      {children}
    </NextThemesProvider>
  )
}