'use client';
import { FunctionComponent, PropsWithChildren, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { LinkToPage } from '@/utils';
import { COOKIE_NAMES } from '@/lib/cookies';
import { getClientCookie } from '@/lib/cookies/client';
import { useAppStore } from '@/store';
import TopBarAndSideBarLayout from './TopBarAndSideBarLayout';

/**
 * Renders "Private Layout" composition
 * @layout PrivateLayout
 */
const PrivateLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const t = useTranslations('nav');
  const [, dispatch] = useAppStore();

  useEffect(() => {
    if (getClientCookie(COOKIE_NAMES.ACCESS_TOKEN)) {
      dispatch({ type: 'LOG_IN' });
    }
  }, [dispatch]);

  const sidebarItems: Array<LinkToPage> = [
    { title: t('home'), path: '/', icon: 'home' },
    { title: '404', path: '/wrong-url', icon: 'error' },
  ];

  return (
    <TopBarAndSideBarLayout sidebarItems={sidebarItems} title="Balinyaar" variant="sidebarPersistentOnDesktop">
      {children}
      {/* <Stack component="footer">Copyright &copy; </Stack> */}
    </TopBarAndSideBarLayout>
  );
};

export default PrivateLayout;