"use client"

import { useState } from "react"

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

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

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

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

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

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

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