"use client"

import { FormSection } from "@/components/form-section"
import { Button } from "@/components/ui/button"

export function EditDangerSection({
  sectionTitle,
  actionTitle,
  actionDescription,
  confirmMessage,
  onDelete,
  actionLabel,
  disabled = false,
  isPending = false,
}: {
  sectionTitle: string
  actionTitle: string
  actionDescription: string
  confirmMessage: string
  onDelete: () => void | Promise<void>
  actionLabel: string
  disabled?: boolean
  isPending?: boolean
}) {
  return (
    <FormSection title={sectionTitle}>
      <div className="flex md:flex-row flex-col md:justify-between md:items-center gap-3">
        <div className="gap-1 grid">
          <div className="font-medium">{actionTitle}</div>
          <p className="text-muted-foreground text-sm">{actionDescription}</p>
        </div>
        <Button
          type="button"
          variant="destructive"
          className="cursor-pointer"
          disabled={disabled || isPending}
          onClick={() => {
            if (!window.confirm(confirmMessage)) return
            void onDelete()
          }}
        >
          {actionLabel}
        </Button>
      </div>
    </FormSection>
  )
}