"use client"

import { useState } from "react"

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

import { MenuItemProps } from "./menuItem"

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

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

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

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