'use client';

import { useTranslations } from 'next-intl';
import { Badge } from '@/components/ui/shared/Badge';

/** Primary-tint styling matching the previous custom connected pill. */
const CONNECTED_BADGE_STYLE = {
  backgroundColor: 'color-mix(in srgb, var(--color-primary) 10%, transparent)',
  color: 'var(--color-primary)',
  borderColor: 'color-mix(in srgb, var(--color-primary) 40%, transparent)',
} as const;

type ConnectedSelectionBadgeProps = {
  className?: string;
};

/** Compact “Connected” label — shared Badge with primary tint (not default variant colors). */
export function ConnectedSelectionBadge({ className }: ConnectedSelectionBadgeProps) {
  const t = useTranslations('treatment');
  return (
    <Badge
      fixedWidth={false}
      className={`text-[10px] min-h-0 py-0.5 px-1.5 leading-none ${className ?? ''}`}
      style={CONNECTED_BADGE_STYLE}
    >
      {t('connectedBadge')}
    </Badge>
  );
}
