"use client";

import Link from "next/link";
import styles from "./CatalogEmptyState.module.css";

export default function CatalogEmptyState({
  icon,
  title,
  lead,
  actionHref,
  actionLabel,
  onAction,
}: {
  icon: string;
  title: string;
  lead: string;
  actionHref?: string;
  actionLabel?: string;
  onAction?: () => void;
}) {
  const showAction = Boolean(actionLabel && (actionHref || onAction));

  return (
    <div className={styles.root}>
      <div className={styles.iconWrap} aria-hidden>
        <img src={icon} alt="" width={22} height={22} />
      </div>
      <div className={styles.copy}>
        <h2 className={styles.title}>{title}</h2>
        <p className={styles.lead}>{lead}</p>
      </div>
      {showAction && actionHref ? (
        <Link href={actionHref} className={`outline-btn ${styles.cta}`}>
          {actionLabel}
        </Link>
      ) : null}
      {showAction && !actionHref && onAction ? (
        <button
          type="button"
          className={`outline-btn ${styles.cta}`}
          onClick={onAction}
        >
          {actionLabel}
        </button>
      ) : null}
    </div>
  );
}