import { __, _n, sprintf } from "@wordpress/i18n";

/**
 * Mini sticky bar for the preview: thumbnails, "+", count and Compare now,
 * in the bar colours (Pro colours apply only with Pro).
 */
const PreviewBar = ({ design, items, addMore }) => {
  const bar = design.bar;

  return (
    <div
      className="ino:flex ino:flex-wrap ino:items-center ino:gap-2.5 ino:rounded-xl ino:px-3 ino:py-2 ino:shadow-lg"
      style={{ background: bar.bg, color: bar.text }}
    >
      {items.map((item) => (
        <span
          key={item.id}
          title={item.name}
          className="ino:size-8 ino:shrink-0 ino:rounded-md"
          style={{ background: item.tint }}
        />
      ))}
      {addMore && (
        <span className="ino:flex ino:size-8 ino:shrink-0 ino:items-center ino:justify-center ino:rounded-md ino:border ino:border-dashed ino:opacity-80">
          +
        </span>
      )}
      <span className="ino:min-w-16 ino:flex-1 ino:text-xs ino:font-medium ino:whitespace-nowrap">
        {sprintf(
          /* translators: %d: number of products */
          _n(
            "%d product",
            "%d products",
            items.length,
            "product-comparison-for-woocommerce",
          ),
          items.length,
        )}
      </span>
      <span
        className="ino:shrink-0 ino:rounded-md ino:px-2.5 ino:py-1.5 ino:text-xs ino:font-semibold ino:whitespace-nowrap"
        style={{ background: bar.button_bg, color: bar.button_text }}
      >
        {__("Compare now", "product-comparison-for-woocommerce")}
      </span>
    </div>
  );
};

export default PreviewBar;