import { cartClass, getConfig, text } from "../lib/config";

/** Placeholder while the table loads; matches the table's shape. */
export function LoadingState() {
  return (
    <div className="pcfw-table-state is-loading" aria-busy="true">
      <span className="pcfw-screen-reader-text">
        {text("loading", "Loading comparison…")}
      </span>
      {[0, 1, 2, 3].map((i) => (
        <div key={i} className="pcfw-skeleton" />
      ))}
    </div>
  );
}

/** Shown when the list has no products. */
export function EmptyState() {
  const { shop_url: shopUrl } = getConfig();

  return (
    <div className="pcfw-table-state is-empty">
      <svg
        className="pcfw-table-state__icon"
        aria-hidden="true"
        width="32"
        height="32"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M8 3 4 7l4 4" />
        <path d="M4 7h16" />
        <path d="m16 21 4-4-4-4" />
        <path d="M20 17H4" />
      </svg>
      <p className="pcfw-table-state__title">
        {text("empty", "No products to compare yet.")}
      </p>
      <p className="pcfw-table-state__hint">
        {text("emptyHint", "Tap Compare on any product to add it here.")}
      </p>
      {shopUrl && (
        <a className={cartClass()} href={shopUrl}>
          {text("browse", "Browse products")}
        </a>
      )}
    </div>
  );
}

/** Shown when the request failed; offers a retry. */
export function ErrorState({ error, onRetry }) {
  return (
    <div className="pcfw-table-state is-error" role="alert">
      <p className="pcfw-table-state__title">
        {error.message || text("error", "The comparison couldn't be loaded.")}
      </p>
      <button type="button" className="pcfw-table__retry" onClick={onRetry}>
        {text("retry", "Try again")}
      </button>
    </div>
  );
}