honeyDueWeb/src/components/shared/upgrade-prompt.tsx

"use client";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Crown } from "lucide-react";

interface UpgradePromptProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  feature: string;
  limitInfo?: string;
}

export function UpgradePrompt({ open, onOpenChange, feature, limitInfo }: UpgradePromptProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <div className="mx-auto mb-2 flex size-12 items-center justify-center rounded-full bg-primary/10">
            <Crown className="size-6 text-primary" />
          </div>
          <DialogTitle className="text-center">Upgrade to Premium</DialogTitle>
          <DialogDescription className="text-center">
            {feature}
          </DialogDescription>
        </DialogHeader>

        {limitInfo && (
          <div className="rounded-lg border bg-muted/50 p-3 text-center">
            <p className="text-sm text-muted-foreground">{limitInfo}</p>
          </div>
        )}

        <div className="space-y-2 text-sm text-muted-foreground">
          <p>
            Premium unlocks unlimited residences, tasks, contractors, documents, sharing, and export
            features.
          </p>
          <p>
            Subscriptions are managed through the honeyDue iOS or Android app.
          </p>
        </div>

        <DialogFooter className="flex flex-col gap-2 sm:flex-col">
          <Button className="w-full" onClick={() => onOpenChange(false)}>
            <Crown className="size-4" />
            Upgrade on App Store
          </Button>
          <Button variant="outline" className="w-full" onClick={() => onOpenChange(false)}>
            Maybe Later
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}