"use client";

import { MessageCircle } from "lucide-react";

import { ButtonLink } from "@/components/ui/button-link";
import { supportLinks } from "@/lib/constants/site";
import { usePaidSupport } from "@/components/dashboard/paid-support-context";
import { cn } from "@/lib/utils";

type Props = {
  className?: string;
  layout?: "row" | "stack";
  size?: "sm" | "default";
  /**
   * When true, always show (e.g. checkout success after payment).
   * When false, never show. When omitted, use dashboard paid eligibility.
   */
  unlock?: boolean;
};

/** WhatsApp support — only for paying customers (dashboard) unless `unlock` is set. */
export function SupportActions({
  className,
  layout = "row",
  size = "default",
  unlock,
}: Props) {
  const paidFromLayout = usePaidSupport();
  const eligible =
    unlock === true ? true : unlock === false ? false : paidFromLayout;

  const compact = size === "sm";
  if (!eligible) return null;

  return (
    <div
      className={cn(
        "flex gap-3",
        layout === "stack" && "flex-col",
        className,
      )}
    >
      <ButtonLink
        href={supportLinks.whatsapp}
        target="_blank"
        rel="noopener noreferrer"
        variant="outline"
        className={cn(
          "rounded-full border-emerald-500/40 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 hover:text-emerald-300",
          compact && "h-9 px-4 text-xs",
        )}
      >
        <MessageCircle className="size-4" />
        WhatsApp
      </ButtonLink>
    </div>
  );
}