"use client";

import type { Status } from "@/store/createListStore";

/** Placeholder cards while the first load is in flight. Only shown when there is nothing to display yet. */
export function LifeSkeleton() {
  return (
    <div className="lf-grid" aria-busy="true" aria-label="Loading">
      {[0, 1, 2].map((i) => (
        <div key={i} className="lf-skel" />
      ))}
    </div>
  );
}

/** Error notice for a list. When sample content exists, the page keeps showing it and says so. */
export function LifeNotice({ status, error, hasFallback, onRetry }: { status: Status; error: string | null; hasFallback: boolean; onRetry: () => void }) {
  if (status !== "error") return null;

  if (hasFallback) {
    return (
      <p className="lf-notice" role="status">
        Live listings are unavailable right now. Showing sample listings.
      </p>
    );
  }

  return (
    <div className="lf-notice" role="alert">
      <span>{error ?? "Something went wrong. Please try again."}</span>
      <button type="button" className="lf-chip" onClick={onRetry}>
        Try again
      </button>
    </div>
  );
}