import type { FeatureMeta } from '../types';
import InfoPopup from './InfoPopup';

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

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