export type HeaderImageSpec = {
  src: string;
  alt: string;
  width: number;
  height: number;
};

export type HeaderNavLeaf = {
  label: string;
  href: string;
};

export type HeaderNavSubmenu = {
  label: string;
  href: string;
  children: HeaderNavLeaf[];
};

export type HeaderNavDropdownChild = HeaderNavLeaf | HeaderNavSubmenu;

export type HeaderNavDropdown = {
  label: string;
  href: string;
  dropdownVariant?: string;
  children: HeaderNavDropdownChild[];
};

export type HeaderNavTopItem = HeaderNavLeaf | HeaderNavDropdown;

export function isDropdown(item: HeaderNavTopItem): item is HeaderNavDropdown {
  return "children" in item && Array.isArray(item.children);
}

export function isSubmenu(
  item: HeaderNavDropdownChild,
): item is HeaderNavSubmenu {
  return "children" in item && Array.isArray(item.children);
}

export const headerMenu: HeaderNavTopItem[] = [
  { label: "Home", href: "/" },
  {
    label: "Pages",
    href: "#",
    children: [
      { label: "About Us", href: "/about-us" },
      { label: "Our Services", href: "/our-service" },
      { label: "Single Service", href: "/single-service" },
      { label: "Our Team", href: "/our-team" },
      { label: "Single Team", href: "/single-team" },
      { label: "Pricing Table", href: "/pricing-table" },
      { label: "Career Page", href: "/career" },
      { label: "Career Details", href: "/career-details" },
      {
        label: "Shop",
        href: "#",
        children: [
          { label: "Product Catalog", href: "/shop" },
          {
            label: "Product Details",
            href: "/product-details",
          },
          { label: "Cart", href: "/cart" },
          { label: "Checkout", href: "/checkout" },
        ],
      },
      { label: "Contact Us", href: "/contact-us" },
      { label: "FAQs", href: "/faqs" },
      { label: "404 Error", href: "/404" },
      { label: "Coming Soon", href: "/coming-soon" },
      { label: "Onepage Landing", href: "/onepage-landing" },
    ],
  },
  {
    label: "Blog",
    href: "#",
    children: [
      { label: "Blog Standard", href: "/blog-standard" },
      { label: "Blog Grid", href: "/blog-grid" },
      { label: "Blog Horizon", href: "/blog-horizon" },
      { label: "Image Post", href: "/post-image" },
      { label: "Gallery Post", href: "/post-gallery" },
      { label: "Video Post", href: "/post-video" },
      { label: "Audio Post", href: "/post-audio" },
    ],
  },
  {
    label: "Portfolio",
    href: "#",
    dropdownVariant: "v2",
    children: [
      {
        label: "Portfolio Grid",
        href: "#",
        children: [
          { label: "2 Columns", href: "/portfolio-grid-2-columns" },
          { label: "3 Columns", href: "/portfolio-grid-3-columns" },
          { label: "4 Columns", href: "/portfolio-grid-4-columns" },
        ],
      },
      {
        label: "Portfolio Masonry",
        href: "#",
        children: [
          { label: "2 Columns", href: "/portfolio-masonry-2-columns" },
          { label: "3 Columns", href: "/portfolio-masonry-3-columns" },
        ],
      },
      {
        label: "Single Portfolio",
        href: "#",
        children: [
          { label: "Layout 1", href: "/layout-1" },
          { label: "Layout 2", href: "/layout-2" },
          { label: "Layout 3", href: "/layout-3" },
        ],
      },
    ],
  },
  { label: "Solutions", href: "/our-service" },
  { label: "Pricing", href: "/pricing-table" },
];

const logo = {
  href: "/",
  title: "Home",
  alt: "Sasico SaaS Analytics Logo",
  lightSrc: "/assets/images/logo.svg",
  darkSrc: "/assets/images/logo-dark.svg",
  width: 140,
  height: 40,
};

const dropdownIcon: HeaderImageSpec = {
  src: "/assets/images/icon/angel.svg",
  alt: "image",
  width: 12,
  height: 12,
};

const mobile = {
  closeIcon: {
    src: "/assets/images/icon/xmark2.svg",
    alt: "Close Menu",
    width: 24,
    height: 24,
  } satisfies HeaderImageSpec,
};

const toolbar = {
  search: {
    href: "#",
    ariaLabel: "Search",
    icon: {
      src: "/assets/images/icon/search.svg",
      alt: "Search Icon",
      width: 20,
      height: 20,
    } satisfies HeaderImageSpec,
  },
  login: {
    href: "#",
    label: "Log In",
    variant: "v3",
    arrowIcon: {
      src: "/assets/images/icon/arrow.svg",
      alt: "Arrow Icon",
      width: 12,
      height: 12,
    } satisfies HeaderImageSpec,
  },
  signUp: {
    href: "#",
    label: "Sign Up",
    variant: "v2",
    arrowIcon: {
      src: "/assets/images/icon/arrow.svg",
      alt: "Arrow Icon",
      width: 12,
      height: 12,
    } satisfies HeaderImageSpec,
  },
};

/** Logo, toolbar, and `menu` (same as `headerMenu`). Used by `Header` and `MobileMenu`. */
export const header = {
  logo,
  dropdownIcon,
  mobile,
  toolbar,
  menu: headerMenu,
};