One Dialog

'use client'

import { useState } from 'react'

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field-1'
import { Input } from '@/components/ui/input'

const CONFIRM_TEXT = 'delete'

export function Dialog13() {
  const [value, setValue] = useState('')
  const canDelete = value === CONFIRM_TEXT

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Delete agent</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Delete agent</DialogTitle>
          <DialogDescription>
            This removes the agent, its run history, and its logs from your
            Dali console. Type{' '}
            <span className="text-foreground font-mono font-medium">
              {CONFIRM_TEXT}
            </span>{' '}
            to confirm.
          </DialogDescription>
        </DialogHeader>
        <Field>
          <FieldLabel htmlFor="dialog-13-confirm">Confirmation</FieldLabel>
          <Input
            id="dialog-13-confirm"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder={CONFIRM_TEXT}
            autoComplete="off"
          />
          <FieldDescription>
            The delete button stays disabled until the text matches.
          </FieldDescription>
        </Field>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button variant="destructive" disabled={!canDelete}>
            Delete agent
          </Button>
        </DialogFooter>
        <a
          href="https://daliagents.com"
          target="_blank"
          rel="noreferrer"
          className="text-muted-foreground/60 hover:text-muted-foreground mx-auto text-[10px] tracking-wide transition-colors"
        >
          daliagents.com
        </a>
      </DialogContent>
    </Dialog>
  )
}

export default Dialog13