'use client';
import Link from 'next/link';

interface Props {
  current: 'mine' | 'shared' | 'all';
  counts: { mine: number; shared: number };
}

export function GroupsTabs({ current, counts }: Props) {
  const tabs: { key: Props['current']; label: string; href: string }[] = [
    { key: 'mine', label: `My Groups (${counts.mine})`, href: '/groups' },
    { key: 'shared', label: `Shared with me (${counts.shared})`, href: '/groups?tab=shared' },
  ];
  return (
    <div className="flex border-b border-gray-200">
      {tabs.map((t) => (
        <Link key={t.key} href={t.href}
          className={`px-4 py-2 text-sm border-b-2 -mb-px transition-colors ${
            current === t.key
              ? 'border-blue-600 text-blue-700 font-medium'
              : 'border-transparent text-gray-600 hover:text-gray-900'
          }`}>
          {t.label}
        </Link>
      ))}
    </div>
  );
}