'use client';
import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
import { useTranslations } from 'next-intl';
import { NotificationBell } from '@/components/notifications';
import { ROUTES } from '@/constants';
import { LinkToPage } from '@/utils';
import MobileShell from './MobileShell';

/**
 * Customer (family) app shell — five bottom-nav destinations, with «پروفایل» doubling as the
 * account hub that now owns appearance/language settings (they used to sit in the top bar).
 * @layout CustomerLayout
 */
const CustomerLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const t = useTranslations('nav');

  const tabs: Array<LinkToPage> = useMemo(
    () => [
      { title: t('home'), path: ROUTES.HOME, icon: 'home', matchPaths: [ROUTES.SEARCH] },
      { title: t('bookings'), path: ROUTES.BOOKINGS, icon: 'bookings' },
      { title: t('patients'), path: ROUTES.PATIENTS, icon: 'patients' },
      { title: t('wallet'), path: ROUTES.WALLET, icon: 'wallet' },
      {
        title: t('profile'),
        path: ROUTES.PROFILE,
        icon: 'account',
        matchPaths: [ROUTES.ADDRESSES, ROUTES.SUPPORT_TICKETS, ROUTES.NOTIFICATIONS],
      },
    ],
    [t]
  );

  return (
    <MobileShell name="Customer" tabs={tabs} headerActions={<NotificationBell role="customer" />}>
      {children}
    </MobileShell>
  );
};

export default CustomerLayout;