import React from 'react';

import {
  CREDITS_ARTICLE_IMAGE,
  articleCostCredits,
  formatCredits,
} from '../../lib/credit-costs';

interface GenerationCostProps {
  /** Language versions the button will write, the primary one included. */
  languageCount: number;
}

/**
 * The price a generate dialog states above its button: the text for every
 * language version, and the images, which are billed only when drawn.
 *
 * @param {GenerationCostProps} props - How many language versions run.
 * @returns {JSX.Element} The cost line.
 */
const GenerationCost = ({
  languageCount,
}: GenerationCostProps): JSX.Element => (
  <p className="rounded-lg bg-muted px-3 py-2 text-xs text-muted-foreground">
    <span className="font-medium text-foreground">
      Cost: {formatCredits(articleCostCredits(languageCount))}
    </span>
    {languageCount > 1 ? ` for ${languageCount} language versions. ` : '. '}
    Images are extra, {formatCredits(CREDITS_ARTICLE_IMAGE)} each, and only when
    you generate one. Nothing goes live until you publish it.
  </p>
);

export default GenerationCost;