Author Form Card

import { AuthorFormCard } from "@/components/ui/author-form-card";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Toaster, toast } from "sonner";

export default function AuthorFormCardDemo() {
  const handleFormSubmit = (data: { name: string; title: string, imageUrl?: string }) => {
    console.log("Form submitted:", data);
    toast.success(`Author "${data.name}" has been saved!`);
    // Here you would typically close the dialog and refresh data
  };

  const handleCancel = () => {
    console.log("Form cancelled");
    toast.info("Action was cancelled.");
  };
  
  // An example of initial data for an "edit" scenario
  const existingAuthor = {
    name: "Jane Doe",
    title: "Lead Developer",
    imageUrl: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-odeolBZIWJQnTXTfGgQL4zl9csbXnl.png&w=320&q=75", // Replace with your image src
  };

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background">
      <Dialog>
        <DialogTrigger asChild>
          <Button>Add New Writer</Button>
        </DialogTrigger>
        <DialogContent className="p-0 bg-transparent border-none shadow-none w-full max-w-lg">
          {/* The `AuthorFormCard` is self-contained. 
            Pass the onSubmit and onCancel handlers as props.
          */}
          <AuthorFormCard
            onSubmit={handleFormSubmit}
            onCancel={handleCancel}
            // Uncomment the line below to see the "edit" state
            // initialData={existingAuthor} 
          />
        </DialogContent>
      </Dialog>
      <Toaster position="top-right" richColors />
    </div>
  );
}