"use client";

import styles from "@/components/BusinessDetailsPage.module.css";

export type CatalogControlsMode = "edit-remove" | "manage";

export default function CatalogCardControls({
  mode = "edit-remove",
  onEdit,
  onRemove,
  onManage,
  busy,
}: {
  mode?: CatalogControlsMode;
  onEdit?: () => void;
  onRemove?: () => void;
  onManage?: () => void;
  busy?: boolean;
}) {
  if (mode === "manage") {
    return (
      <div className={styles.cardControls}>
        <button
          type="button"
          className={styles.cardControl}
          disabled={busy}
          onClick={(event) => {
            event.stopPropagation();
            onManage?.();
          }}
        >
          Manage business
        </button>
      </div>
    );
  }

  return (
    <div className={styles.cardControls}>
      <button
        type="button"
        className={styles.cardControl}
        disabled={busy}
        onClick={(event) => {
          event.stopPropagation();
          onEdit?.();
        }}
      >
        Edit
      </button>
      <button
        type="button"
        className={`${styles.cardControl} ${styles.cardControlDanger}`}
        disabled={busy}
        onClick={(event) => {
          event.stopPropagation();
          onRemove?.();
        }}
      >
        Remove
      </button>
    </div>
  );
}