import { Label } from 'src/components/label';
import { SvgColor } from 'src/components/svg-color';

// Navbar Icons

const icon = (name: string) => <SvgColor src={`/assets/icons/navbar/${name}.svg`} />;
const iconDD = (name: string) => <img src={`/assets/icons/dd-icons/${name}.ico`} alt="" style={{ width: 24, height: 24 }} />;

export type NavItem = {
  title: string;
  path: string;
  icon: React.ReactNode;
  info?: React.ReactNode;
};

export const navData = [
  {
    title: 'Dashboard',
    path: '/',
    icon: icon('ic-analytics'),
  },
  {
    title: 'EasyFlow',
    path: '/doc-search',
    icon: iconDD('DD_easyFLOW_ICON'),
  },
  {
    title: 'TaskFlow',
    path: '/blog',
    icon: iconDD('DD_taskFLOW_ICON'),
    info: (
      <Label color="error" variant="inverted">
        +3
      </Label>
    )
  },
  {
    title: 'OrgFlow',
    path: '/products',
    icon: iconDD('DD_orgFLOW_ICON'),
  },
  {
    title: 'SignFlow',
    path: '/user',
    icon: iconDD('DD_signFLOW_ICON'),
  },
  {
    title: 'ChartFlow',
    path: '/chart-flow',
    icon: icon('ic-analytics'),
  },
  {
    title: 'Sign in',
    path: '/sign-in',
    icon: icon('ic-lock'),
  },
  {
    title: 'Not found',
    path: '/404',
    icon: icon('ic-disabled'),
  },
];
