'use client';

import Link from 'next/link';

export interface FilterTab {
	value: string;
	label: string;
}

interface Props {
	// 필터 그룹 라벨 (예: 종류·시장·기간)
	label: string;
	// 쿼리 파라미터 키 (예: type·market·kind)
	paramKey: string;
	tabs: FilterTab[];
	// 현재 활성 값
	active: string;
	// 대상 경로 (예: /market/etp)
	basePath: string;
	// 유지할 다른 쿼리 (page 는 필터 변경 시 초기화되므로 미포함)
	preserve?: Record<string, string>;
}

// 알약형 필터 탭 — Link 기반(SSR 재조회). 필터 변경 시 page 초기화(미부여).
export default function MarketFilterTabs({ label, paramKey, tabs, active, basePath, preserve }: Props)
{
	const buildHref = (value: string) => {
		const params = new URLSearchParams(preserve);
		if (value) {
			params.set(paramKey, value);
		}
		const qs = params.toString();
		return qs ? `${basePath}?${qs}` : basePath;
	};

	return (
		<div className='market__filter-group' role='group' aria-label={label}>
			<span className='market__filter-label'>{label}</span>
			{tabs.map(tab => (
				<Link
					key={tab.value}
					href={buildHref(tab.value)}
					className={`market__tab${active === tab.value ? ' market__tab--active' : ''}`}
					{...(active === tab.value ? { 'aria-current': 'page' as const } : {})}
				>
					{tab.label}
				</Link>
			))}
		</div>
	);
}
