Epicure/apps/web/components/shared/export-markdown-button.tsx

"use client";

import { useState } from "react";
import { Copy, Download, FileDown } from "lucide-react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
import { ProBadge } from "@/components/premium/pro-badge";

export function ExportMarkdownButton({
  markdown,
  filename,
  locked = false,
}: {
  markdown: string;
  filename: string;
  locked?: boolean;
}) {
  const t = useTranslations("common");
  const [upgradeOpen, setUpgradeOpen] = useState(false);

  if (locked) {
    return (
      <>
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger render={
              <Button variant="ghost" size="icon" aria-label={t("exportMarkdown")} onClick={() => setUpgradeOpen(true)}>
                <FileDown className="h-4 w-4" />
              </Button>
            } />
            <TooltipContent className="flex items-center gap-1.5">
              {t("exportMarkdown")}
              <ProBadge />
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
        <UpgradeDialog
          open={upgradeOpen}
          onOpenChange={setUpgradeOpen}
          featureKey="markdown_export"
          featureLabel="Markdown export"
        />
      </>
    );
  }

  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(markdown);
      toast.success(t("copiedToClipboard"));
    } catch {
      toast.error(t("copyFailed"));
    }
  }

  function handleDownload() {
    const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename.endsWith(".md") ? filename : `${filename}.md`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  }

  return (
    <DropdownMenu>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={
            <DropdownMenuTrigger render={
              <Button variant="ghost" size="icon" aria-label={t("exportMarkdown")}>
                <FileDown className="h-4 w-4" />
              </Button>
            } />
          } />
          <TooltipContent>{t("exportMarkdown")}</TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => { void handleCopy(); }}>
          <Copy className="h-4 w-4" />
          {t("copyMarkdown")}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={handleDownload}>
          <Download className="h-4 w-4" />
          {t("downloadMarkdown")}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}