"use client"

import { useState } from "react"

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

import MainMenuButton from "../../MainMenuButton"
import { navigationMenuItemVariants } from "./variants"

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

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

export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
  const { children, title, href, seeAllLinkText, infoCard } = item
  const [isExpanded, setIsExpanded] = useState(false)
  const isMobile = variant === "mobile"

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

  return children?.length ? (
    <MainMenuButton
      onClick={handleButtonClick}
      className={navigationMenuItemVariants({ variant })}
    >
      {title}
      {isMobile ? (
        <ChevronRightIcon className={`${styles.chevron}`} color="red" />
      ) : (
        <ChevronDownIcon
          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
          color="red"
        />
      )}
    </MainMenuButton>
  ) : (
    <Link
      href={href}
      color="burgundy"
      className={navigationMenuItemVariants({ variant })}
    >
      {title}
    </Link>
  )
}