import { Dialog, Button, Text } from '@photonix/ultimate';
import { useState } from 'react';

export default function DialogExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title="Confirm Action"
        description="Are you sure you want to proceed?"
        actions={[
          { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
          { label: 'Confirm', onClick: () => setOpen(false) },
        ]}
      >
        <Box p="lg">Confirm this action</Box>
      </Dialog>
    </>
  );
}

import { ConfirmDialog, Button } from '@photonix/ultimate';
import { Warning } from '@photonix/icons/illustrated';
import { useState } from 'react';

export default function ConfirmExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Delete Items</Button>
      <ConfirmDialog
        open={open}
        onClose={() => setOpen(false)}
        icon={<Warning />}
        title="Confirm Deletion"
        description="Are you sure you want to delete 5 items? This action cannot be undone."
        actions={[
          { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
          { label: 'Delete', variant: 'primary', onClick: () => setOpen(false) },
        ]}
      />
    </>
  );
}

import { 
  ConfirmVerifyDialog, 
  ConfirmWarningDialog, 
  ConfirmInfoDialog, 
  ConfirmErrorDialog, 
  Button 
} from '@photonix/ultimate';

// Use them directly without needing to pass an icon
<ConfirmVerifyDialog
  open={open}
  title="Action Successful"
  description="Your changes have been saved."
  actions={[{ label: 'Done', onClick: () => setOpen(false) }]}
/>

import { Dialog, Button, TextField, VStack } from '@photonix/ultimate';
import { useState } from 'react';

export default function FormDialogExample() {
  const [open, setOpen] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget as HTMLFormElement);
    alert(`User ${formData.get('username')} added!`);
    setOpen(false);
  };

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Form Dialog</Button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title="Add User"
        description="Enter user details below. Required fields are marked with *."
        actions={[
          { label: 'Cancel', variant: 'secondary', onClick: () => setOpen(false) },
          { 
            label: 'Create Account', 
            type: 'submit', 
            form: 'user-form',
          },
        ]}
      >
        <form id="user-form" onSubmit={handleSubmit} style={{ padding: 'var(--space-md) 0' }}>
          <VStack gap="md">
            <TextField 
              name="username" 
              label="Username"
              placeholder="e.g. hoangthuan"
              required 
              autoFocus
            />
            <TextField 
              name="email" 
              label="Email Address"
              type="email"
              placeholder="[email protected]"
              required 
            />
          </VStack>
        </form>
      </Dialog>
    </>
  );
}

<Dialog
  open={open}
  title="Terms & Conditions"
  footerLayout="withCheckbox"
  checkboxProps={{
    label: "I agree to the terms",
    checked: agreed,
    onChange: setAgreed
  }}
  actions={[
    { label: 'Continue', disabled: !agreed, onClick: handleContinue }
  ]}
>
  <Text>Terms content...</Text>
</Dialog>

<Dialog
  open={open}
  size="large"
  headerAlign="left"
  title="Large Dialog"
  // ...
/>