"use client";

import { useCallback, useEffect, useState } from "react";

export function useCookieState<T extends string>(
  name: string,
  defaultValue?: T,
  config?: { expires?: number },
) {
  const [state, setState] = useState<T>();

  const handleChange = useCallback(
    (value: T) => {
      if (document) {
        // `expires` is a duration in ms; the cookie needs an absolute date
        const ttl = config?.expires ?? 365 * 24 * 60 * 60 * 1000; // one year
        const expires = new Date(Date.now() + ttl).toUTCString();
        document.cookie = `${name}=${value}; path=/; expires=${expires}`;
        setState(value);
      }
    },
    [name, config],
  );

  useEffect(() => {
    if (document) {
      const cookie = document.cookie
        .split("; ")
        .find((row) => row.startsWith(name));
      if (!cookie) {
        setState(defaultValue);
        return;
      }
      const value = cookie.split("=")[1] as T;
      setState(value);
    }
  }, []);

  return [state, handleChange] as const;
}