/**
 * TabFilter Component
 *
 * 탭 형태의 필터 컴포넌트
 */

'use client';

import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import type { TabFilterProps } from './types';

export function TabFilter({ value, onChange, options }: TabFilterProps) {
  return (
    <Tabs value={value} onValueChange={onChange} className="w-full">
      <div className="overflow-x-auto -mx-2 px-2">
        <TabsList className="inline-flex w-auto min-w-full md:grid md:w-full md:max-w-2xl" style={{
          gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`
        }}>
          {options.map((option) => (
            <TabsTrigger key={option.value} value={option.value} className="whitespace-nowrap">
              {option.label}
              {option.count !== undefined && ` (${option.count})`}
            </TabsTrigger>
          ))}
        </TabsList>
      </div>
    </Tabs>
  );
}

export default TabFilter;