'use client'

import React, { useState } from 'react'
import Link from 'next/link'

export const CommunityNavLinks: React.FC = () => {
  const [open, setOpen] = useState(true)

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

  return (
    <div className="nav-group">
      <button
        className={`nav-group__toggle ${open ? 'nav-group__toggle--open' : ''}`}
        type="button"
        onClick={() => setOpen(!open)}
      >
        <div className="nav-group__label">Community Dashboards</div>
        <div className="nav-group__indicator">
          <svg
            className="icon icon--chevron nav-group__indicator"
            height="100%"
            style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
            viewBox="0 0 20 20"
            width="100%"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path className="stroke" d="M14 8L10 12L6 8" strokeLinecap="square" />
          </svg>
        </div>
      </button>
      {open && (
        <div className="nav-group__content">
          {links.map((link) => (
            <Link key={link.href} href={link.href} className="nav__link">
              <span className="nav__link-label">{link.label}</span>
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}

export default CommunityNavLinks