export function TechNames({ names }: { names: string[] }) {
  if (names.length === 0) return <span className="text-xs text-gray-300 dark:text-gray-600">—</span>;
  const label = names.join(', ');
  const visible = names.slice(0, 2);
  const extra = names.length - visible.length;
  return (
    <div className="flex max-w-[10rem] flex-wrap items-center justify-center gap-1" title={label}>
      {visible.map((name, index) => (
        <span key={`${name}-${index}`} className="truncate rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
          {name}
        </span>
      ))}
      {extra > 0 && (
        <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
          +{extra}
        </span>
      )}
    </div>
  );
}