import React from 'react';

/** Props for {@link ArticleSourcePrompts}. */
interface ArticleSourcePromptsProps {
  /** Tracked-prompt strings the article was written against. */
  prompts: string[] | undefined;
  /** How many prompt chips to show before collapsing the rest into "+N more". */
  visibleLimit?: number;
}

/**
 * Inline "Targets: <prompt>, <prompt> + N more" strip rendered under an
 * article card so the merchant can see which tracked prompts motivated
 * the article. Hidden entirely when the article has no prompt linkage
 * (manual briefs, legacy rows).
 *
 * @param {ArticleSourcePromptsProps} props - Component props.
 * @returns {JSX.Element | null} Strip element or ``null`` when no prompts are present.
 */
const ArticleSourcePrompts = ({
  prompts,
  visibleLimit = 2,
}: ArticleSourcePromptsProps): JSX.Element | null => {
  const cleaned: string[] = (prompts ?? [])
    .map(prompt => prompt?.trim())
    .filter((prompt): prompt is string => Boolean(prompt));

  if (cleaned.length === 0) return null;

  const shown: string[] = cleaned.slice(0, visibleLimit);
  const overflow: number = Math.max(0, cleaned.length - shown.length);

  return (
    <div className="mt-2 flex flex-wrap items-center gap-1.5 text-[11px] text-gray-500">
      <span className="inline-flex items-center gap-1 font-medium text-gray-700">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="12"
          height="12"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
        </svg>
        Targets:
      </span>
      {shown.map((prompt, index) => (
        <span
          key={`${prompt}-${index}`}
          className="inline-flex max-w-[18rem] truncate rounded-md border border-gray-200 bg-gray-50 px-1.5 py-0.5"
          title={prompt}
        >
          {prompt}
        </span>
      ))}
      {overflow > 0 && (
        <span className="rounded-md border border-gray-200 bg-gray-50 px-1.5 py-0.5">
          +{overflow} more
        </span>
      )}
    </div>
  );
};

export default ArticleSourcePrompts;
