import type { JSX, SVGProps } from 'react'

import { ChartIcon } from '~/components/icons/chart'
import { ChatIcon } from '~/components/icons/chat'
import { DocumentIcon } from '~/components/icons/document'
import { MedicalNotesIcon } from '~/components/icons/medical-notes'
import { ProfileIcon } from '~/components/icons/profile'
import { SettingIcon } from '~/components/icons/setting'
import { WalletIcon } from '~/components/icons/wallet'

type TMenu = {
  group: string
  items: {
    title: string
    url: string
    icon: (
      properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
    ) => JSX.Element
  }[]
}

export const MENU: TMenu[] = [
  {
    group: 'Menu',
    items: [
      {
        title: 'Dashboard',
        url: '/lg-admin',
        icon: ChartIcon,
      },
      {
        title: 'User',
        url: '/lg-admin/users',
        icon: DocumentIcon,
      },
      {
        title: 'Konten',
        url: '/lg-admin/contents',
        icon: ChatIcon,
      },
      {
        title: 'Advertisement',
        url: '/lg-admin/advertisements',
        icon: MedicalNotesIcon,
      },
      {
        title: 'Subscription',
        url: '/lg-admin/subscriptions',
        icon: ChartIcon,
      },
    ],
  },
  {
    group: 'Others',
    items: [
      {
        title: 'Data Situs',
        url: '/lg-admin/site-data',
        icon: WalletIcon,
      },
      {
        title: 'Pengaturan',
        url: '/lg-admin/settings',
        icon: SettingIcon,
      },
      {
        title: 'Admin',
        url: '/lg-admin/admins',
        icon: ProfileIcon,
      },
    ],
  },
]