// components/ui/Tabs.tsx
'use client';
import { ChevronDownIcon } from '@heroicons/react/16/solid';
import clsx from 'clsx';
import * as React from 'react';
import Badge from '@/components/ui/Badge';
export type TabsVariant =
| 'underline' // Standard: Unterstrich, wie bisher (mit optionalem Count/Badge)
| 'underlineFull' // Full-width Tabs mit Unterstrich
| 'bar' // "Bar with underline" Variante
| 'pills' // Pills (neutral)
| 'pillsGray' // Pills auf grauem Hintergrund
| 'pillsBrand'; // Pills mit Brand-Farbe
export type TabItem = {
id: string;
label: string;
/** optional: Anzahl / Badge, z.B. "52" */
count?: number | string;
/** optional: Icon (z.B. ) */
icon?: React.ReactNode;
};
type TabsProps = {
tabs: TabItem[];
value: string;
onChange: (id: string) => void;
className?: string;
ariaLabel?: string;
variant?: TabsVariant;
};
export default function Tabs({
tabs,
value,
onChange,
className,
ariaLabel = 'Ansicht auswählen',
variant = 'underline',
}: TabsProps) {
if (!tabs || tabs.length === 0) return null;
const isValidValue = tabs.some((t) => t.id === value);
const currentId = isValidValue ? value : tabs[0].id;
const current = tabs.find((t) => t.id === currentId)!;
const renderDesktopTabs = () => {
switch (variant) {
case 'underline':
return (
);
case 'underlineFull':
return (
);
case 'bar':
return (
);
case 'pills':
return (
);
case 'pillsGray':
return (
);
case 'pillsBrand':
return (
);
default:
return null;
}
};
return (
{/* Mobile: Select + Chevron (für alle Varianten gleich) */}
{/* Desktop: abhängig von variant */}
{renderDesktopTabs()}