import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: () => import("@/views/components/Introduction.vue"),
  },
  {
    path: "/estilos/cores",
    name: "colors",
    component: () => import("@/views/styles/Colors.vue"),
    props: true,
  },
  {
    path: "/estilos/tipografia",
    name: "typography",
    component: () => import("@/views/styles/Typography/index.vue"),
    props: true,
  },
  {
    path: "/components/avatar",
    name: "avatar",
    component: () => import("@/views/components/Avatar.vue"),
    props: true,
  },
  {
    path: "/components/button",
    name: "buttons",
    component: () => import("@/views/components/Button.vue"),
    props: true,
  },
  {
    path: "/components/modal",
    name: "modal",
    component: () => import("@/views/components/Modal.vue"),
    props: true,
  },
  {
    path: "/components/card",
    name: "card",
    component: () => import("@/views/components/Card.vue"),
    props: true,
  },
  {
    path: "/components/breadcrumb",
    name: "breadcrumb",
    component: () => import("@/views/components/Breadcrumb.vue"),
    props: true,
  },
  {
    path: "/components/sidebar",
    name: "sidebar",
    component: () => import("@/views/components/Sidebar.vue"),
    props: true,
  },
  {
    path: "/components/spinner",
    name: "spinner",
    component: () => import("@/views/components/Spinner.vue"),
    props: true,
  },
  {
    path: "/components/dropdown",
    name: "dropdown",
    component: () => import("@/views/components/DropDown.vue"),
  },
  {
    path: "/components/tag",
    name: "tag",
    component: () => import("@/views/components/Tag.vue"),
    props: true,
  },
  // apenas sidebar
  {
    path: "/components/sidebar/Dashboard-sidebar",
    name: "Dashboard-sidebar",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Minhas-vendas",
    name: "Minhas-vendas",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Assinaturas",
    name: "Assinaturas",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Afiliados",
    name: "Afiliados",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Clientes",
    name: "Clientes",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Reclamações",
    name: "Reclamações",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Novo-produto",
    name: "Novo-produto",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Meus-produtos",
    name: "Meus-produtos",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Área-de-membros",
    name: "Área-de-membros",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Cupons",
    name: "Cupons",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Links",
    name: "Links",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Checkouts",
    name: "Checkouts",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Afiliações",
    name: "Afiliações",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Extrato",
    name: "Extrato",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Sacar-dinheiro",
    name: "Sacar-dinheiro",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Meus-Saques",
    name: "Meus-Saques",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Antecipações",
    name: "Antecipações",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Contas-bancárias",
    name: "Contas-bancárias",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Emissões-de-NF",
    name: "Emissões-de-NF",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Visão-Geral",
    name: "Visão-Geral",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Criação-de-páginas",
    name: "Criação-de-páginas",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/E-mail-marketing",
    name: "E-mail-marketing",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Relatorio",
    name: "Relatorio",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Controle-de-acesso",
    name: "Controle-de-acesso",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
  {
    path: "/components/sidebar/Tokens-e-Api-Key",
    name: "Tokens-e-Api-Key",
    component: () => import("@/views/Teste.vue"),
    props: true,
  },
];

const router = createRouter({
  history: createWebHistory("/"),
  routes,
});

export default router;
