import { useEffect, useState } from 'react'

export interface FilterState {
  activeIngredient: string
  category: string
  lab: string
}

const STORAGE_KEY = 'mp-quick-filters'

export const defaultFilters: FilterState = {
  activeIngredient: '',
  category: '',
  lab: ''
}

export function usePersistentFilters() {
  const [filters, setFilters] = useState<FilterState>(() => {
    const persisted = localStorage.getItem(STORAGE_KEY)
    return persisted ? (JSON.parse(persisted) as FilterState) : defaultFilters
  })

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(filters))
  }, [filters])

  return { filters, setFilters }
}
