import {createStore} from 'zustand/vanilla'
import {persist} from 'zustand/middleware'

export type ClientStore = ClientState & ClientActions

type Point = 'sm' | 'md' | 'lg' | 'xl'

export type ClientState = {
  breakpoint: {
    sm: boolean
    md: boolean
    lg: boolean
    xl: boolean
  }
}

export type ClientActions = {
  setBreakpoints: (breakpoints: Partial<ClientState['breakpoint']>) => void
}

export const createClientStore = () => {
  return createStore<ClientStore>()(persist(
    setState => ({
      breakpoint: {
        sm: false,
        md: false,
        lg: false,
        xl: false,
      },

      setBreakpoints: breakpoints => setState(state => ({
        breakpoint: {
          ...state.breakpoint,
          ...breakpoints,
        },
      })),
    }),

    {
      name: 'client-store',
      partialize: state => ({
        device: state.breakpoint,
      }),
    },
  ))
}
