import { createContext, useContext, useEffect, useState } from 'react'
import axios from 'axios'

const SettingsContext = createContext({})

export function SettingsProvider({ children }) {
  const [settings, setSettings] = useState({
    kennel_name: 'BREEDR',
    kennel_tagline: '',
  })
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    axios.get('/api/settings')
      .then(res => {
        setSettings(prev => ({ ...prev, ...res.data }))
      })
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  const saveSettings = async (updates) => {
    await axios.put('/api/settings', updates)
    setSettings(prev => ({ ...prev, ...updates }))
  }

  return (
    <SettingsContext.Provider value={{ settings, saveSettings, loading }}>
      {children}
    </SettingsContext.Provider>
  )
}

export function useSettings() {
  return useContext(SettingsContext)
}