import { NavLink } from 'react-router-dom'

const LINKS: { to: string; label: string }[] = [
  { to: '/app/parent/home', label: 'Dashboard' },
  { to: '/app/parent/add-second-parent', label: 'Add second parent' },
  { to: '/app/parent/assignments', label: 'Assignments' },
  { to: '/app/parent/attendance', label: 'Attendance' },
  { to: '/app/parent/calendar', label: 'Calendar' },
  { to: '/app/parent/classes', label: 'Classes' },
  { to: '/app/parent/progress', label: 'Class progress' },
  { to: '/app/parent/edit-emergency-contact', label: 'Emergency contacts' },
  { to: '/app/parent/edit-all-students', label: 'Edit all students' },
  { to: '/app/parent/add-student-form', label: 'Add student form' },
  { to: '/app/parent/add-emergency-form', label: 'Add emergency form' },
  { to: '/app/parent/contact', label: 'Contact' },
  { to: '/app/parent/enroll-classes', label: 'Enroll in classes' },
  { to: '/app/parent/enroll/success', label: 'Enroll success' },
  { to: '/app/parent/enroll/failure', label: 'Enroll failure' },
  { to: '/app/parent/events', label: 'Events' },
  { to: '/app/parent/invoice-payment', label: 'Invoice payment' },
  { to: '/app/parent/no-kids-registered', label: 'No kids registered' },
  { to: '/app/parent/message', label: 'Message' },
  { to: '/app/parent/payment', label: 'Payments / invoices' },
  { to: '/app/parent/payment/success', label: 'Payment success' },
  { to: '/app/parent/register-student', label: 'Register student' },
  { to: '/app/parent/report-attendance', label: 'Report attendance' },
  { to: '/app/parent/attendance-reports', label: 'My attendance reports' },
  { to: '/app/parent/authorized-users', label: 'Authorized users' },
  { to: '/app/parent/update-profile', label: 'Update profile' },
  { to: '/app/parent/report-cards', label: 'Report cards' },
  { to: '/app/parent/scores', label: 'Scores' },
  { to: '/app/parent/success', label: 'Success message' },
  { to: '/app/parent/withdraw/success', label: 'Withdraw success' },
]

export function ParentSectionNav() {
  const linkClass = ({ isActive }: { isActive: boolean }) =>
    `d-block px-2 py-1 rounded text-decoration-none small ${
      isActive ? 'bg-success text-white' : 'text-body'
    }`

  return (
    <nav className="nav flex-column gap-1" aria-label="Parent section">
      {LINKS.map(({ to, label }) => (
        <NavLink key={to} to={to} className={linkClass} end={to === '/app/parent/home'}>
          {label}
        </NavLink>
      ))}
    </nav>
  )
}
