import * as TabScroller from '#/components/TabScroller';
import { tabLabel } from '#/components/TabScroller.css';
import { Text } from '#/components/Text';

import { m } from '#/paraglide/messages';
import { space } from '#/styles/tokens.css';

/**
 * Horizontally-scrolling row of category pills, scrolling the selected pill into view. Used for the interests
 * picker on the Explore screen and the find-follows flow.
 */
export function InterestTabs({
	interests,
	interestsDisplayNames,
	onSelectTab,
	selectedInterest,
}: {
	interests: string[];
	interestsDisplayNames: Record<string, () => string>;
	onSelectTab: (tab: string) => void;
	selectedInterest: string;
}) {
	return (
		<TabScroller.Root activeKey={selectedInterest} gutterWidth={space.lg}>
			{interests.map((interest) => {
				const active = interest === selectedInterest;
				const displayName = interestsDisplayNames[interest]!();
				return (
					<TabScroller.Tab
						active={active}
						aria-label={
							active
								? m['components.web.category.a11y.active']({ name: displayName })
								: m['components.web.category.a11y.select']({ name: displayName })
						}
						key={interest}
						onClick={() => onSelectTab(interest)}
					>
						<Text className={tabLabel} size="md_sub" weight="medium">
							{displayName}
						</Text>
					</TabScroller.Tab>
				);
			})}
		</TabScroller.Root>
	);
}