'use client'

import React from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

import './CommunityNavLinks.scss'

export const CommunityNavLinks: React.FC = () => {
  const pathname = usePathname()

  const links = [
    {
      href: '/admin/views/community/inbox',
      label: 'Community Inbox',
      icon: '📥',
    },
    {
      href: '/admin/views/community/analytics',
      label: 'Community Analytics',
      icon: '📊',
    },
  ]

  return (
    <div className="community-nav-links">
      <div className="community-nav-links__header">
        <span className="community-nav-links__icon">💬</span>
        <span className="community-nav-links__title">Community</span>
      </div>
      <nav className="community-nav-links__list">
        {links.map((link) => {
          const isActive = pathname === link.href
          return (
            <Link
              key={link.href}
              href={link.href}
              target="_blank"
              rel="noopener noreferrer"
              className={`community-nav-links__link ${isActive ? 'community-nav-links__link--active' : ''}`}
            >
              <span className="community-nav-links__link-icon">{link.icon}</span>
              <span className="community-nav-links__link-label">{link.label}</span>
            </Link>
          )
        })}
      </nav>
    </div>
  )
}

export default CommunityNavLinks
