import { NavItem } from "@/types";
import { MainNavItem, SidebarNavItem } from "@/types/nav";

export type User = {
  id: number;
  name: string;
  company: string;
  role: string;
  verified: boolean;
  status: string;
};

// show customised outline when an element has focus (but only if the user is
// using the keyboard)
// TODO: move this to a global css rule
export const FOCUS_VISIBLE_OUTLINE = `focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/70`;

export const LINK_STYLES = `text-rose-100/90 underline decoration-rose-200/30 underline-offset-2 transition-all hover:text-rose-100 hover:decoration-rose-200/50`;

export const LINK_SUBTLE_STYLES = `hover:underline hover:decoration-rose-300/30 hover:underline-offset-2 hover:text-rose-200/90`;

export const HEADING_LINK_ANCHOR = `before:content-['#'] before:absolute before:-ml-[1em] before:text-rose-100/0 hover:before:text-rose-100/50 pl-[1em] -ml-[1em]`;

export const navItems: NavItem[] = [
  {
    title: "Upload CV",
    href: "/dashboard",
    icon: "upload",
    label: "Dashboard",
  },
  {
    title: "Take Quiz",
    href: "/dashboard/quiz",
    icon: "shieldQuestion",
    label: "Take Quiz",
  },
  {
    title: "Your Task",
    href: "/dashboard/task/react/1",
    icon: "bookCheck",
    label: "Your Task",
  },

  {
    title: "Profile",
    href: "/dashboard/profile",
    icon: "profile",
    label: "profile",
  },

  // {
  //   title: "Login",
  //   href: "/",
  //   icon: "login",
  //   label: "login",
  // },
];

export const questions = [
  {
    category: "python",
    id: "6233861762eaad73716a8cb1",
    correctAnswer: "A programming language",
    incorrectAnswers: [
      "A type of snake",
      "A software development company",
      "A HTML competitor",
    ],
    question: {
      text: "What is Python?",
    },
    tags: ["python"],
    type: "text_choice",
    difficulty: "easy",
    regions: [],
    isNiche: false,
  },
  {
    category: "python",
    id: "62602e064b176d54800e3cbc",
    correctAnswer: "#",
    incorrectAnswers: ["//", "@", ">"],
    question: {
      text: "What symbol is used for comments in Python?",
    },
    tags: ["python"],
    type: "text_choice",
    difficulty: "easy",
    regions: [],
    isNiche: false,
  },
  {
    category: "python",
    id: "623740cccb85f7ce9e949d23",
    correctAnswer: "Character",
    incorrectAnswers: ["String", "Integer", "Boolean"],
    question: {
      text: "Which of the following is not a valid data type in Python?",
    },
    tags: ["python"],
    type: "text_choice",
    difficulty: "easy",
    regions: [],
    isNiche: false,
  },
  {
    category: "python",
    id: "622a1c3c7cc59eab6f951977",
    correctAnswer: "x = 5",
    incorrectAnswers: ["var x;", "const x = 5", "int x = 5"],
    question: {
      text: "How do you declare a variable in Python?",
    },
    tags: ["words", "mythology", "python"],
    type: "text_choice",
    difficulty: "easy",
    regions: [],
    isNiche: false,
  },
  {
    category: "python",
    id: "65056e927a97013de78b5313",
    correctAnswer: "input()",
    incorrectAnswers: ["get_input()", "read_input()", "foo_input()"],
    question: {
      text: "What function is used to get user input in Python?",
    },
    tags: ["python"],
    type: "text_choice",
    difficulty: "easy",
    regions: [],
    isNiche: false,
  },
];

interface AppNavItem {
  mainNav: MainNavItem[];
  sidebarNav: SidebarNavItem[];
}

export const appNavItems: AppNavItem = {
  mainNav: [
    {
      title: "Pricing",
      href: "/pricing",
    },
    {
      title: "Community",
      href: "#",
    },
  ],
  sidebarNav: [
    {
      title: "Courses",
      items: [
        {
          title: "Python Programming",
          href: "#",
          items: [],
        },
        {
          title: "Web Dev With ReactJS",
          href: "#",
          items: [],
        },
        {
          title: "Machine Learning Fundamentals",
          href: "#",
          items: [],
        },
      ],
    },
    {
      title: "Career Paths",
      items: [
        {
          title: "Frontend Developer",
          href: "#",
          items: [],
        },
        {
          title: "Backend Developer",
          href: "#",
          items: [],
        },
        {
          title: "Full Stack Developer",
          href: "#",
          items: [],
        },
        {
          title: "Mobile App Developer",
          href: "#",
          items: [],
        },
        {
          title: "Game Developer",
          href: "#",
          items: [],
        },
        {
          title: "Machine Learning Developer",
          href: "#",
          items: [],
        },
      ],
    },
  ],
};