Mission Success Dialog

import React, { useState } from 'react';
import { MissionSuccessDialog } from '@/components/ui/mission-success-dialog'; // Adjust path as needed
import { Button } from '@/components/ui/button';
import { ShieldQuestion } from 'lucide-react'; // Example icon

export default function MissionSuccessDialogDemo() {
  const [isDialogOpen, setDialogOpen] = useState(false);

  // Example handler for the primary button
  const handlePrimaryAction = (inputValue: string) => {
    console.log("Planet Name:", inputValue);
    alert(`Mission to planet "${inputValue}" has been set!`);
  };
  
  // Example handler for the secondary button
  const handleSecondaryAction = () => {
    console.log("User is not interested.");
    alert("Mission aborted.");
  };

  return (
    <div className="flex h-[500px] w-full items-center justify-center rounded-lg bg-background">
      <Button onClick={() => setDialogOpen(true)}>
        Complete Mission
      </Button>

      <MissionSuccessDialog
        isOpen={isDialogOpen}
        onClose={() => setDialogOpen(false)}
        imageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-HmiK2xmQ3e7Xtx7v2gRFAWYob8haFe.png&w=320&q=75"
        title="Well Done!"
        description="You're about to land on an unknown planet. What will you name it?"
        inputPlaceholder="Enter your Name"
        primaryButtonText="Next Mission"
        onPrimaryClick={handlePrimaryAction}
        secondaryButtonText="Not Interested"
        onSecondaryClick={handleSecondaryAction}
        badgeText="Go Invisible"
        badgeIcon={<ShieldQuestion className="h-3 w-3" />}
      />
    </div>
  );
}