import { useTranslation } from 'react-i18next';
import type { FeatureMeta } from '../../types';
import { ts, tsDesc } from '../../i18n/server';
import InfoPopup from './InfoPopup';

interface FeatureInfoPopupProps {
  feature: FeatureMeta;
  onClose: () => void;
  onNavigateToSource?: (slug: string, featureName: string) => void;
}

export function FeatureInfoPopup({ feature, onClose, onNavigateToSource }: FeatureInfoPopupProps) {
  const { t } = useTranslation();
  return (
    <InfoPopup
      title={ts(feature.name)}
      onClose={onClose}
      sourceLink={
        feature.source && onNavigateToSource
          ? {
              label: t('common.viewDataSource'),
              onClick: () => {
                onNavigateToSource(feature.source!, feature.name);
                onClose();
              },
            }
          : undefined
      }
    >
      {feature.description && (
        <p className="text-xs text-warm-500 dark:text-warm-400 mb-2">
          {tsDesc(feature.name, feature.description)}
        </p>
      )}
      {feature.detail && (
        <p className="text-sm text-warm-700 dark:text-warm-300 mb-4 leading-relaxed">
          {feature.detail}
        </p>
      )}
    </InfoPopup>
  );
}