'use client'

// 引入react-i18next库，用于翻译
import { useTranslation } from 'react-i18next'
// 引入Link组件，用于页面跳转
import Link from 'next/link'
// 引入next/navigation库，用于获取当前选中的布局片段
import { useSelectedLayoutSegment } from 'next/navigation'
// 引入RiPlanetFill和RiPlanetLine图标
import {
  RiPlanetFill,
  RiPlanetLine,
} from '@remixicon/react'
// 引入classNames函数，用于处理类名
import classNames from '@/utils/classnames'

// 定义ExploreNav组件的props类型
type ExploreNavProps = {
  className?: string
}

// 定义ExploreNav组件
const ExploreNav = ({
  className,
}: ExploreNavProps) => {
  // 使用useTranslation钩子，获取翻译函数t
  const { t } = useTranslation()
  // 使用useSelectedLayoutSegment钩子，获取当前选中的布局片段
  const selectedSegment = useSelectedLayoutSegment()
  // 判断当前选中的布局片段是否为explore
  const activated = selectedSegment === 'explore'

  // 返回Link组件，用于页面跳转
  return (
    <Link href="/explore/apps" className={classNames(
      className, 'group',
      // 如果当前选中的布局片段为explore，则添加bg-components-main-nav-nav-button-bg-active和shadow-md类名
      activated && 'bg-components-main-nav-nav-button-bg-active shadow-md',
      // 如果当前选中的布局片段为explore，则添加text-components-main-nav-nav-button-text-active类名，否则添加text-components-main-nav-nav-button-text和hover:bg-components-main-nav-nav-button-bg-hover类名
      activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
    )}>
      {
        // 如果当前选中的布局片段为explore，则显示RiPlanetFill图标，否则显示RiPlanetLine图标
        activated
          ? <RiPlanetFill className='mr-2 w-4 h-4' />
          : <RiPlanetLine className='mr-2 w-4 h-4' />
      }
      {/* // 显示翻译后的文本 */}
      {t('common.menus.explore')}
    </Link>
  )
}

// 导出ExploreNav组件
export default ExploreNav