beaver_project/app-instance/frontend/components/task-management/TaskManagementTabs.tsx

'use client';

import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';
import { Clock3, ListTodo } from 'lucide-react';

import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import { cn } from '@/lib/utils';

const TASK_MANAGEMENT_TABS = [
  {
    label: 'ordinary',
    href: '/tasks',
    icon: ListTodo,
    match: (pathname: string, tab: string | null) => pathname.startsWith('/tasks') && tab !== 'scheduled',
  },
  {
    label: 'scheduled',
    href: '/tasks?tab=scheduled',
    icon: Clock3,
    match: (pathname: string, tab: string | null) => pathname.startsWith('/tasks') && tab === 'scheduled',
  },
] as const;

export function TaskManagementTabs() {
  const { locale } = useAppI18n();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const activeTab = searchParams.get('tab');

  return (
    <div className="rounded-2xl border border-border/70 bg-muted/20 p-1">
      <div className="flex flex-wrap gap-1">
        {TASK_MANAGEMENT_TABS.map((tab) => {
          const isActive = tab.match(pathname, activeTab);
          const Icon = tab.icon;

          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={cn(
                'inline-flex h-11 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-colors',
                isActive
                  ? 'bg-background text-foreground shadow-sm'
                  : 'text-muted-foreground hover:bg-background/70 hover:text-foreground'
              )}
            >
              <Icon className="h-4 w-4" />
              {tab.label === 'scheduled'
                ? pickAppText(locale, '定时任务', 'Scheduled tasks')
                : pickAppText(locale, '普通任务', 'Ordinary tasks')}
            </Link>
          );
        })}
      </div>
    </div>
  );
}