'use client';

import { Button } from '@/components/ui/button';
import {
  DialogStack,
  DialogStackBody,
  DialogStackContent,
  DialogStackDescription,
  DialogStackNext,
  DialogStackOverlay,
  DialogStackPrevious,
  DialogStackTitle,
  DialogStackTrigger,
} from '@/components/ui/dialog-stack';

export function DialogStackDemo() {
  return (
    <DialogStack>
      <DialogStackTrigger asChild>
        <Button variant="outline">Open</Button>
      </DialogStackTrigger>
      
      <DialogStackOverlay />
      
      <DialogStackBody>
        <DialogStackContent className="h-auto w-full rounded-lg border bg-background p-6 shadow-lg">
          <div className="flex flex-col space-y-1.5 text-center sm:text-left">
            <DialogStackTitle className="font-semibold text-lg leading-none tracking-tight">
              I'm the first dialog
            </DialogStackTitle>
            <DialogStackDescription className="text-muted-foreground text-sm">
              With a fancy description
            </DialogStackDescription>
          </div>
          <div className="flex items-center space-x-2 pt-4 justify-end">
            <DialogStackNext asChild>
              <Button variant="outline">Next</Button>
            </DialogStackNext>
          </div>
        </DialogStackContent>

        <DialogStackContent className="h-auto w-full rounded-lg border bg-background p-6 shadow-lg">
          <div className="flex flex-col space-y-1.5 text-center sm:text-left">
            <DialogStackTitle className="font-semibold text-lg leading-none tracking-tight">
              I'm the second dialog
            </DialogStackTitle>
            <DialogStackDescription className="text-muted-foreground text-sm">
              With a fancy description
            </DialogStackDescription>
          </div>
          <div className="flex items-center space-x-2 pt-4 justify-between">
            <DialogStackPrevious asChild>
              <Button variant="outline">Previous</Button>
            </DialogStackPrevious>
            <DialogStackNext asChild>
              <Button variant="outline">Next</Button>
            </DialogStackNext>
          </div>
        </DialogStackContent>

        <DialogStackContent className="h-auto w-full rounded-lg border bg-background p-6 shadow-lg">
          <div className="flex flex-col space-y-1.5 text-center sm:text-left">
            <DialogStackTitle className="font-semibold text-lg leading-none tracking-tight">
              I'm the final dialog
            </DialogStackTitle>
            <DialogStackDescription className="text-muted-foreground text-sm">
              With a fancy description
            </DialogStackDescription>
          </div>
          <div className="flex items-center space-x-2 pt-4 justify-start">
            <DialogStackPrevious asChild>
              <Button variant="outline">Previous</Button>
            </DialogStackPrevious>
          </div>
        </DialogStackContent>
      </DialogStackBody>
    </DialogStack>
  );
}