"use client"

import { useState } from "react"

import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"

import MainMenuButton from "../../MainMenuButton"

import styles from "./navigationMenuItem.module.css"

import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"

export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
  const { submenu, title, link, seeAllLink, card } = item
  const [isExpanded, setIsExpanded] = useState(false) // TODO: Use store to manage this state when adding the menu itself.

  function handleButtonClick() {
    setIsExpanded((prev) => !prev)
  }

  return submenu.length ? (
    <MainMenuButton
      onClick={handleButtonClick}
      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
    >
      {title}
      {isMobile ? (
        <ChevronRightIcon className={`${styles.chevron}`} color="red" />
      ) : (
        <ChevronDownIcon
          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
          color="red"
        />
      )}
    </MainMenuButton>
  ) : (
    <Link
      href={link!.href}
      color="burgundy"
      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
    >
      {title}
    </Link>
  )
}