import { createContext, useContext, useEffect, useState } from "react"
import client from "../api/client"

export interface HeroSlide { nav_title: string; kicker: string; title: string; description: string; action: string; href: string; background: string }
export interface Branding { site_name: string; logo_url: string; hero_video_url: string; hero_title: string; hero_description: string; hero_slides: HeroSlide[]; auth_background_type: "image" | "video"; auth_background_url: string }
const fallback: Branding = { site_name: "网站", logo_url: "", hero_video_url: "", hero_title: "", hero_description: "", hero_slides: [], auth_background_type: "video", auth_background_url: "/bg.mp4" }
const BrandingContext = createContext<Branding>(fallback)

export function BrandingProvider({ children }: { children: React.ReactNode }) {
  const [branding, setBranding] = useState(fallback)
  useEffect(() => { void client.get<{ data?: Branding }>("/v1/site-branding").then((res) => setBranding({ ...fallback, ...res.data.data })).catch(() => undefined) }, [])
  return <BrandingContext.Provider value={branding}>{children}</BrandingContext.Provider>
}

export function useBranding() { return useContext(BrandingContext) }
