import { readVisitedPots, recordVisitedPot, type VisitedPot } from '../utils/visitedPots'

export function useVisitedPots() {
  const stored = useState<VisitedPot[] | null>('visited-pots', () => null)

  if (import.meta.client && stored.value === null) {
    stored.value = readVisitedPots(window.localStorage)
  }

  const pots = computed(() => stored.value ?? [])

  function recordVisit(pot: Omit<VisitedPot, 'visitedAt'>) {
    if (!import.meta.client) return
    stored.value = recordVisitedPot(window.localStorage, pot)
  }

  return { pots, recordVisit }
}