"use client";

import Link from "next/link";
import { Sparkles } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";

export function UpgradeDialog({
  open,
  onOpenChange,
  featureKey,
  featureLabel,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  featureKey: string;
  featureLabel: string;
}) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-sm">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-primary" />
            A Pro feature
          </DialogTitle>
          <DialogDescription>
            {featureLabel} is available on the Pro plan (€4.99/mo). Free accounts don&apos;t include it.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter className="sm:justify-start">
          <Link
            href={`/support?upgrade=${encodeURIComponent(featureKey)}`}
            className={cn(buttonVariants({ variant: "default" }))}
          >
            I&apos;m interested — let us know
          </Link>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}