import { useTranslation } from 'react-i18next';
import type { FeatureMeta } from '../../types';
import { ts, tsDesc } from '../../i18n/server';
import { InfoIcon } from './icons';
import { getFeatureIcon } from '../../lib/feature-icons';
import { getGroupIcon } from '../../lib/group-icons';

interface FeatureLabelProps {
  feature: FeatureMeta;
  onShowInfo?: (feature: FeatureMeta) => void;
  className?: string;
  size?: 'xs' | 'sm';
  description?: string;
  label?: string;
  hideIconOnMobile?: boolean;
  wrap?: boolean;
}

export function FeatureLabel({
  feature,
  onShowInfo,
  className = '',
  size = 'xs',
  description,
  label,
  hideIconOnMobile,
  wrap = false,
}: FeatureLabelProps) {
  const { t } = useTranslation();
  const textClass = size === 'sm' ? 'text-sm' : 'text-xs';
  const gapClass = size === 'sm' ? 'gap-2' : 'gap-1';
  const alignmentClass = wrap ? 'items-start' : size === 'xs' ? 'items-center' : 'items-start';
  const mobileHide = hideIconOnMobile ? 'hidden md:block ' : '';
  const iconClass = `${mobileHide}w-3.5 h-3.5 text-teal-600 dark:text-teal-400 shrink-0`;
  const featureIcon = getFeatureIcon(feature.name, iconClass);
  const GroupIcon = !featureIcon && feature.group ? getGroupIcon(feature.group) : null;

  const translatedName = label ?? ts(feature.name);
  const translatedDesc = description ? tsDesc(feature.name, description) : undefined;

  const nameContent = (
    <>
      <span
        className={`${textClass} ${
          size === 'sm'
            ? 'font-medium text-navy-950 dark:text-warm-100'
            : 'text-warm-700 dark:text-warm-300'
        } ${wrap ? 'min-w-0 flex-1 break-words leading-snug' : size === 'xs' ? 'truncate' : ''}`}
      >
        {translatedName}
      </span>
      {feature.detail && onShowInfo && (
        <button
          onClick={() => onShowInfo(feature)}
          className="p-1 -m-0.5 rounded text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 hover:bg-warm-100 dark:hover:bg-warm-700 shrink-0"
          title={t('filters.aboutData')}
          aria-label={t('filters.aboutData')}
        >
          <InfoIcon className="w-3.5 h-3.5" />
        </button>
      )}
    </>
  );

  return (
    <div className={`flex ${alignmentClass} ${gapClass} min-w-0 ${className}`}>
      {featureIcon}
      {GroupIcon && <GroupIcon className={iconClass} />}
      {translatedDesc ? (
        <div className="min-w-0">
          <div className={`flex ${wrap ? 'items-start' : 'items-center'} gap-1`}>{nameContent}</div>
          <span className="text-xs text-warm-400 dark:text-warm-500 block">{translatedDesc}</span>
        </div>
      ) : (
        nameContent
      )}
    </div>
  );
}
