import { useTranslation } from "react-i18next";

interface ClassificationBadgeProps {
	classification: string;
	onCycle: () => void;
}

export function ClassificationBadge({
	classification,
	onCycle,
}: ClassificationBadgeProps) {
	const { t } = useTranslation("collection");
	const label = t(`classificationBadge.${classification}`, {
		defaultValue: t("classificationBadge.base"),
	});

	return (
		<button
			type="button"
			onClick={(e) => {
				e.stopPropagation();
				onCycle();
			}}
			className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors cursor-pointer"
		>
			{label}
		</button>
	);
}