import z from 'zod';

import { pathsConfig } from '@kit/shared/config';
import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
import { PageHeader } from '@kit/ui/page';
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarNavigation,
} from '@kit/ui/shadcn-sidebar';
import { Trans } from '@kit/ui/trans';

export const routes = [
  {
    children: [
      {
        label: 'common:routes.profile',
        path: pathsConfig.app.personalAccountSettings,
        end: true,
      },

      {
        label: 'common:routes.preferences',
        path: pathsConfig.app.personalAccountPreferences,
        end: true,
      },

      {
        label: 'common:routes.security',
        path: pathsConfig.app.personalAccountSecurity,
        end: true,
      },
    ],
  },
] satisfies z.infer<typeof NavigationConfigSchema>['routes'];

export function SettingsSidebar() {
  return (
    <Sidebar>
      <SidebarHeader className="mt-16 h-24 w-[95vw] max-w-screen justify-center border-b bg-white pt-2">
        <PageHeader
          title={<Trans i18nKey="account:accountTabLabel" />}
          description={<Trans i18nKey={'account:accountTabDescription'} />}
        />
      </SidebarHeader>

      <SidebarContent className="w-auto">
        <SidebarNavigation
          config={{ style: 'custom', sidebarCollapsedStyle: 'none', routes }}
        />
      </SidebarContent>
    </Sidebar>
  );
}