'use client';
import React from 'react';
import { Menu } from 'lucide-react';
import { useTranslations } from 'next-intl';
import type { CabinetSection } from '../lib/types';

// ─── Props ─────────────────────────────────────────────────────────────────────

interface CabinetNavProps {
  activeSection: CabinetSection;
  onMenuClick: () => void;
}

// ─── Component ─────────────────────────────────────────────────────────────────

export const CabinetNav: React.FC<CabinetNavProps> = ({
  activeSection,
  onMenuClick,
}) => {
  const t = useTranslations('Cabinet');

  const SECTION_LABELS: Record<CabinetSection, string> = {
    dashboard: t('dashboard'),
    plagiat: t('plagiatChecks'),
    si: t('siNav'),
    payments: t('payments'),
    profile: t('profile'),
  };

  return (
    <header className="h-14 px-4 md:px-6 flex lg:hidden items-center justify-between border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-20">
      <div className="flex items-center gap-3">
        <button
          onClick={onMenuClick}
          className="lg:hidden p-2 rounded-lg text-slate-500 hover:bg-slate-100 transition-colors"
          aria-label="Menu"
        >
          <Menu size={18} />
        </button>
        <h1 className="text-sm font-semibold text-slate-800">
          {SECTION_LABELS[activeSection]}
        </h1>
      </div>
    </header>
  );
};