import { Link } from '@tanstack/react-router'

type Props = {
  role?: string | null
}

export function StaffTabs({ role }: Props) {
  return (
    <nav className="staff-tabs" aria-label="Bereich">
      <Link
        className="staff-tab"
        to="/staff"
        activeOptions={{ exact: true }}
        activeProps={{ className: 'is-active' }}
        viewTransition
      >
        Reservierungen
      </Link>
      {role === 'admin' && (
        <Link
          className="staff-tab"
          to="/staff/tables"
          activeProps={{ className: 'is-active' }}
          viewTransition
        >
          Tische
        </Link>
      )}
      {role === 'admin' && (
        <Link
          className="staff-tab"
          to="/staff/team"
          activeProps={{ className: 'is-active' }}
          viewTransition
        >
          Mitarbeiter
        </Link>
      )}
      {role === 'admin' && (
        <Link
          className="staff-tab"
          to="/staff/settings"
          activeProps={{ className: 'is-active' }}
          viewTransition
        >
          Einstellungen
        </Link>
      )}
    </nav>
  )
}