import { cn } from "@/lib/utils";

/** Shared Modstagram button design — border #C3C3C3, accent #FC8EAC */
export const BTN_BORDER = "border-[#C3C3C3]";

export const btnBase =
  "btn-modern gentle-transition font-semibold active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50";

export const btnDefault = cn(
  btnBase,
  "rounded-3xl bg-white/90 px-4 text-foreground",
  BTN_BORDER,
  "hover:bg-white dark:bg-neutral-900/90 dark:hover:bg-neutral-900"
);

export const btnPrimary = cn(
  btnBase,
  "btn-modern--primary rounded-3xl px-4 text-white",
  BTN_BORDER
);

export const btnSecondary = cn(btnDefault, "font-medium text-foreground/90");

export const btnFilterChip = cn(
  btnBase,
  "rounded-3xl bg-white/90 px-4 py-1.5 text-xs font-semibold",
  BTN_BORDER,
  "dark:bg-neutral-900/90"
);

export const btnFilterChipActive = cn(
  btnBase,
  "btn-modern--selected rounded-3xl px-4 py-1.5 text-xs font-semibold text-white",
  BTN_BORDER
);

export function filterChipClass(active: boolean, className?: string) {
  return cn(active ? btnFilterChipActive : btnFilterChip, className);
}

export function toggleBtnClass(active: boolean, className?: string) {
  return cn(
    btnBase,
    "rounded-3xl px-4",
    BTN_BORDER,
    active ? "btn-modern--selected text-white" : "bg-white/90 text-foreground dark:bg-neutral-900/90",
    className
  );
}

export function selectionCardClass(active: boolean, className?: string) {
  return cn(
    "w-full max-w-full p-2",
    active && "btn-modern--selected text-white",
    className
  );
}

/** Compact profile / grid action buttons */
export const profileActionBtnClass = cn(
  btnDefault,
  "flex h-7 md:h-8 w-full max-w-full items-center justify-center rounded-3xl px-2 text-center text-[12px] font-semibold md:text-sm max-sm:text-[8px]"
);

export const btnHeightSm = "h-9";
export const btnHeightMd = "h-10";
