import React from 'react';
import { useTranslation } from 'react-i18next';

interface ROIBadge {
  savings_min?: number;
  savings_max?: number;
  currency?: string;
  period?: string;
  translation_key: string;
  custom?: boolean;
}

interface ValuePropositionBadgeProps {
  roiBadge: ROIBadge;
  className?: string;
}

/**
 * ValuePropositionBadge - Displays ROI and business value metrics for pricing tiers
 * Shows savings potential to help bakery owners understand the value
 */
export const ValuePropositionBadge: React.FC<ValuePropositionBadgeProps> = ({
  roiBadge,
  className = '',
}) => {
  const { t } = useTranslation('subscription');
  const displayText = t(roiBadge.translation_key);

  return (
    <div
      className={`
        bg-gradient-to-r from-green-50 to-emerald-50
        border border-green-200
        rounded-lg
        px-4 py-3
        flex items-center gap-2
        ${className}
      `}
      role="status"
      aria-label="ROI information"
    >
      <div className="flex-shrink-0">
        <svg
          className="w-5 h-5 text-green-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </div>
      <div className="flex-1">
        <p className="text-sm font-semibold text-green-800 leading-tight">
          {displayText}
        </p>
      </div>
    </div>
  );
};

export default ValuePropositionBadge;
