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 };
}