/* eslint-disable react-refresh/only-export-components */
import { createContext, useContext, useState, useEffect, useCallback } from 'react';
import apiClient from '../api/client';

const BrandContext = createContext(null);

export function BrandProvider({ children }) {
  const [brand, setBrand] = useState(null);
  const [loading, setLoading] = useState(true);

  const fetchBrand = useCallback(async () => {
    try {
      const res = await apiClient.get('/api/brand');
      setBrand(res.data);
    } catch {
      setBrand(null);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { fetchBrand(); }, [fetchBrand]);

  return (
    <BrandContext.Provider value={{ brand, loading, refetch: fetchBrand }}>
      {children}
    </BrandContext.Provider>
  );
}

export function useBrand() {
  return useContext(BrandContext);
}