"use client"

import { Button } from "@/components/ui/button"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { CustomAlertDialogTrigger } from "@/components/custom-alert-dialog"

export function AlertDialogSection() {
  return (
    <div className="space-y-8">
      <SectionHeading
        title="Alert Dialog"
        description="A modal dialog that interrupts the user with important content and expects a response."
      />

      <ComponentContainer
        title="Basic Alert Dialog"
        description="A simple alert dialog with a title, description, and action buttons."
        code={`import { Button } from "@/components/ui/button"
import { CustomAlertDialogTrigger } from "@/components/custom-alert-dialog"

export function AlertDialogDemo() {
  return (
    <CustomAlertDialogTrigger
      dialogProps={{
        title: "Are you absolutely sure?",
        description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
        cancelText: "Cancel",
        confirmText: "Continue",
        onConfirm: () => console.log("Confirmed"),
        onCancel: () => console.log("Cancelled")
      }}
    >
      <Button variant="outline">Show Alert</Button>
    </CustomAlertDialogTrigger>
  )
}`}
      >
        <div className="flex items-center justify-center p-6">
          <CustomAlertDialogTrigger
            dialogProps={{
              title: "Are you absolutely sure?",
              description:
                "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
              cancelText: "Cancel",
              confirmText: "Continue",
              onConfirm: () => console.log("Confirmed"),
              onCancel: () => console.log("Cancelled"),
            }}
          >
            <Button variant="outline">Show Alert</Button>
          </CustomAlertDialogTrigger>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Destructive Alert Dialog"
        description="A destructive alert dialog for dangerous actions."
        code={`import { Button } from "@/components/ui/button"
import { CustomAlertDialogTrigger } from "@/components/custom-alert-dialog"

export function DestructiveAlertDialogDemo() {
  return (
    <CustomAlertDialogTrigger
      dialogProps={{
        title: "Delete Account",
        description: "This will permanently delete your account and all associated data. This action cannot be undone.",
        cancelText: "Cancel",
        confirmText: "Delete Account",
        variant: "destructive",
        onConfirm: () => console.log("Account deleted")
      }}
    >
      <Button variant="destructive">Delete Account</Button>
    </CustomAlertDialogTrigger>
  )
}`}
      >
        <div className="flex items-center justify-center p-6">
          <CustomAlertDialogTrigger
            dialogProps={{
              title: "Delete Account",
              description:
                "This will permanently delete your account and all associated data. This action cannot be undone.",
              cancelText: "Cancel",
              confirmText: "Delete Account",
              variant: "destructive",
              onConfirm: () => console.log("Account deleted"),
            }}
          >
            <Button variant="destructive">Delete Account</Button>
          </CustomAlertDialogTrigger>
        </div>
      </ComponentContainer>
    </div>
  )
}