import { cn } from '@/lib/utils';
import { List, Users } from 'lucide-react';
import type { ActivityQuery, Translate } from './activity-format';

const NS = 'activity';

interface Props {
    tab: ActivityQuery['tab'];
    onChange: (tab: ActivityQuery['tab']) => void;
    t: Translate;
}

/**
 * Flux / Équipe — même pilule que le sélecteur des avis clients
 * (`reviews/tabs-switcher`), mais pilotée par l'URL (`?tab=team`) au lieu de
 * deux routes : l'onglet fait partie des filtres, il survit au partage du lien.
 */
export function ActivityTabs({ tab, onChange, t }: Props) {
    const tabs: Array<{ key: ActivityQuery['tab']; label: string; icon: typeof List }> = [
        { key: 'feed', label: t(NS, 'tab_feed', 'Flux'), icon: List },
        { key: 'team', label: t(NS, 'tab_team', 'Équipe'), icon: Users },
    ];

    return (
        <div role="tablist" aria-label={t(NS, 'tabs_label', "Vues du journal d'activité")} data-tour="activity-tabs" className="inline-flex self-start rounded-full border bg-white p-1 shadow-sm">
            {tabs.map(({ key, label, icon: Icon }) => {
                const active = tab === key;

                return (
                    <button
                        key={key}
                        type="button"
                        role="tab"
                        aria-selected={active}
                        onClick={() => onChange(key)}
                        className={cn(
                            'focus-visible:ring-ring inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',
                            active ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100',
                        )}
                    >
                        <Icon className="h-4 w-4" aria-hidden="true" />
                        {label}
                    </button>
                );
            })}
        </div>
    );
}