import 'hazo_ui/styles.css';

import { set_hazo_ui_config } from 'hazo_ui';

// Set custom colors globally (typically in your app's entry point)
set_hazo_ui_config({
  // Dialog headers
  header_background_color: '#1e3a8a',
  header_text_color: '#ffffff',

  // Submit/Apply buttons
  submit_button_background_color: '#10b981',
  submit_button_text_color: '#ffffff',

  // Cancel buttons
  cancel_button_border_color: '#6b7280',
  cancel_button_text_color: '#374151',

  // Clear/Delete buttons
  clear_button_border_color: '#ef4444',
  clear_button_text_color: '#ef4444',
});

<HazoUiMultiFilterDialog
  availableFields={fields}
  onFilterChange={handleFilterChange}
  // Color overrides (these take precedence over global config)
  headerBackgroundColor="#7c3aed"
  headerTextColor="#ffffff"
  submitButtonBackgroundColor="#f59e0b"
  submitButtonTextColor="#ffffff"
  cancelButtonBorderColor="#ec4899"
  cancelButtonTextColor="#ec4899"
/>

interface HazoUiConfig {
  // Dialog Header Colors
  header_background_color?: string;
  header_text_color?: string;

  // Submit/Action Button Colors
  submit_button_background_color?: string;
  submit_button_text_color?: string;
  submit_button_hover_color?: string;

  // Cancel Button Colors
  cancel_button_background_color?: string;
  cancel_button_text_color?: string;
  cancel_button_border_color?: string;
  cancel_button_hover_color?: string;

  // Clear/Delete Button Colors
  clear_button_background_color?: string;
  clear_button_text_color?: string;
  clear_button_border_color?: string;
  clear_button_hover_color?: string;
}

import { Button, Input, Label, Checkbox, Switch, Tabs, TabsList, TabsTrigger, TabsContent } from 'hazo_ui';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'hazo_ui';
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'hazo_ui';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'hazo_ui';
import { HoverCard, HoverCardTrigger, HoverCardContent } from 'hazo_ui';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'hazo_ui';
import { Popover, PopoverTrigger, PopoverContent } from 'hazo_ui';
import { RadioGroup, RadioGroupItem } from 'hazo_ui';
import { Calendar, Textarea } from 'hazo_ui';

import { ANIMATION_PRESETS, resolve_animation_classes } from 'hazo_ui';
import type { AnimationPreset } from 'hazo_ui';

import { HazoUiMultiFilterDialog, type FilterField, type FilterConfig } from 'hazo_ui';
import { useState } from 'react';

function DataTable() {
  const [filters, setFilters] = useState<FilterConfig[]>([]);

  // Define available filter fields
  const availableFields: FilterField[] = [
    {
      value: "name",
      label: "Name",
      type: "text",
      textConfig: {
        minLength: 2,
        maxLength: 50,
      },
    },
    {
      value: "age",
      label: "Age",
      type: "number",
      numberConfig: {
        min: 0,
        max: 120,
        allowDecimal: false,
      },
    },
    {
      value: "price",
      label: "Price",
      type: "number",
      numberConfig: {
        min: 0,
        max: 10000,
        allowDecimal: true,
        decimalLength: 2,
      },
    },
    {
      value: "status",
      label: "Status",
      type: "combobox",
      comboboxOptions: [
        { label: "Active", value: "active" },
        { label: "Inactive", value: "inactive" },
        { label: "Pending", value: "pending" },
        { label: "Completed", value: "completed" },
      ],
    },
    {
      value: "is_verified",
      label: "Verified",
      type: "boolean",
      booleanLabels: {
        trueLabel: "Yes",
        falseLabel: "No",
      },
    },
    {
      value: "created_date",
      label: "Created Date",
      type: "date",
    },
  ];

  // Handle filter changes
  const handleFilterChange = (filterConfig: FilterConfig[]) => {
    setFilters(filterConfig);
    // Apply filters to your data
    console.log('Applied filters:', filterConfig);
  };

  return (
    <div>
      <HazoUiMultiFilterDialog
        availableFields={availableFields}
        onFilterChange={handleFilterChange}
        initialFilters={filters}
        title="Filter Products"           // Optional: customize dialog title (default: "Filter")
        description="Filter by product attributes"  // Optional: customize description
      />
      {/* Your table/grid component */}
    </div>
  );
}

// Available fields configuration
const availableFields: FilterField[] = [
  {
    value: "name",
    label: "Name",
    type: "text",
    textConfig: {
      minLength: 2,
      maxLength: 50,
    },
  },
  {
    value: "age",
    label: "Age",
    type: "number",
    numberConfig: {
      min: 0,
      max: 120,
      allowDecimal: false,
    },
  },
  {
    value: "status",
    label: "Status",
    type: "combobox",
    comboboxOptions: [
      { label: "Active", value: "active" },
      { label: "Inactive", value: "inactive" },
    ],
  },
];

// Initial filters (optional)
const initialFilters: FilterConfig[] = [
  {
    field: "name",
    value: "John",
  },
  {
    field: "age",
    operator: "greater_than",
    value: 25,
  },
];

import { HazoUiMultiSortDialog, type SortField, type SortConfig } from 'hazo_ui';
import { useState } from 'react';

function DataTable() {
  const [sorts, setSorts] = useState<SortConfig[]>([]);

  // Define available sort fields
  const availableFields: SortField[] = [
    {
      value: "name",
      label: "Name",
    },
    {
      value: "age",
      label: "Age",
    },
    {
      value: "price",
      label: "Price",
    },
    {
      value: "status",
      label: "Status",
    },
    {
      value: "created_date",
      label: "Created Date",
    },
  ];

  // Handle sort changes
  const handleSortChange = (sortConfig: SortConfig[]) => {
    setSorts(sortConfig);
    // Apply sorts to your data
    console.log('Applied sorts:', sortConfig);
    // Sort your data based on the configuration
    // First item is primary sort, second is secondary, etc.
  };

  return (
    <div>
      <HazoUiMultiSortDialog
        availableFields={availableFields}
        onSortChange={handleSortChange}
        initialSortFields={sorts}
        title="Sort Products"           // Optional: customize dialog title (default: "Sort")
        description="Drag to reorder sort priority"  // Optional: customize description
      />
      {/* Your table/grid component */}
    </div>
  );
}

// Available sort fields configuration
const availableFields: SortField[] = [
  {
    value: "name",
    label: "Name",
  },
  {
    value: "price",
    label: "Price",
  },
  {
    value: "created_date",
    label: "Created Date",
  },
];

// Initial sort fields (optional)
const initialSortFields: SortConfig[] = [
  {
    field: "name",
    direction: "asc",
  },
  {
    field: "price",
    direction: "desc",
  },
];

import { HazoUiFlexRadio, type HazoUiFlexRadioItem } from 'hazo_ui';
import { useState } from 'react';

function SettingsPanel() {
  const [selectedOption, setSelectedOption] = useState<string>('option1');

  const options: HazoUiFlexRadioItem[] = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
    { label: 'Option 4', value: 'option4' },
  ];

  return (
    <HazoUiFlexRadio
      data={options}
      value={selectedOption}
      onChange={setSelectedOption}
      selection="single"
      layout="horizontal"
      style="radio"
      display_label={true}
    />
  );
}

import { HazoUiFlexRadio, type HazoUiFlexRadioItem } from 'hazo_ui';
import { useState } from 'react';

function IconSelector() {
  const [selectedIcon, setSelectedIcon] = useState<string>('home');

  const iconOptions: HazoUiFlexRadioItem[] = [
    {
      label: 'Home',
      value: 'home',
      icon_selected: 'FaHome',
      icon_unselected: 'FaRegHome',
    },
    {
      label: 'User',
      value: 'user',
      icon_selected: 'FaUser',
      icon_unselected: 'FaRegUser',
    },
    {
      label: 'Settings',
      value: 'settings',
      icon_selected: 'FaCog',
      icon_unselected: 'FaRegCog',
    },
  ];

  return (
    <HazoUiFlexRadio
      data={iconOptions}
      value={selectedIcon}
      onChange={setSelectedIcon}
      selection="single"
      layout="horizontal"
      style="icons"
      display_label={true}
      icon_set="fa"  // FontAwesome icons
    />
  );
}

import { HazoUiFlexRadio, type HazoUiFlexRadioItem } from 'hazo_ui';
import { useState } from 'react';

function MultiSelectExample() {
  const [selectedOptions, setSelectedOptions] = useState<string[]>(['option1', 'option3']);

  const options: HazoUiFlexRadioItem[] = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
    { label: 'Option 4', value: 'option4' },
  ];

  return (
    <HazoUiFlexRadio
      data={options}
      value={selectedOptions}
      onChange={setSelectedOptions}
      selection="multi"
      layout="horizontal"
      style="radio"
      display_label={true}
    />
  );
}

import { HazoUiFlexRadio, type HazoUiFlexRadioItem } from 'hazo_ui';
import { useState } from 'react';

function VerticalIconSelector() {
  const [selected, setSelected] = useState<string>('favorite');

  const options: HazoUiFlexRadioItem[] = [
    {
      label: 'Favorite',
      value: 'favorite',
      icon_selected: 'MdFavorite',
      icon_unselected: 'MdFavoriteBorder',
    },
    {
      label: 'Star',
      value: 'star',
      icon_selected: 'MdStar',
      icon_unselected: 'MdStarBorder',
    },
  ];

  return (
    <HazoUiFlexRadio
      data={options}
      value={selected}
      onChange={setSelected}
      selection="single"
      layout="vertical"
      style="icons"
      display_label={false}  // Hide labels, show only icons
      icon_set="md"  // Material Design icons
    />
  );
}

import { HazoUiPillRadio, type HazoUiPillRadioItem } from 'hazo_ui';
import { useState } from 'react';

function ResponseSelector() {
  const [selected, setSelected] = useState<string>('');

  const options: HazoUiPillRadioItem[] = [
    { value: 'upload', label: 'Upload corrected document', icon: 'FaFolder' },
    { value: 'comment', label: 'Provide comment', icon: 'FaComment' },
  ];

  return (
    <HazoUiPillRadio
      data={options}
      value={selected}
      onChange={setSelected}
    />
  );
}

<HazoUiPillRadio
  data={options}
  value={selected}
  onChange={setSelected}
  layout="vertical"
/>

const priority_options: HazoUiPillRadioItem[] = [
  { value: 'low', label: 'Low', icon: 'FaArrowDown', color: '#22c55e' },
  { value: 'medium', label: 'Medium', icon: 'FaMinus', color: '#f59e0b' },
  { value: 'high', label: 'High', icon: 'FaArrowUp', color: '#ef4444' },
];

<HazoUiPillRadio
  data={priority_options}
  value={selected}
  onChange={setSelected}
/>

<HazoUiPillRadio
  data={options}
  value={selected}
  onChange={setSelected}
  equal_width
/>

<HazoUiPillRadio
  data={options}
  value={selected}
  onChange={setSelected}
  icon_set="md"
  pill_size="lg"
/>

import { HazoUiFlexInput } from 'hazo_ui';
import { useState } from 'react';

function BasicForm() {
  const [value, setValue] = useState<string>("");

  return (
    <HazoUiFlexInput
      input_type="mixed"
      placeholder="Enter text..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

import { HazoUiFlexInput } from 'hazo_ui';
import { useState } from 'react';

function PriceInput() {
  const [price, setPrice] = useState<string>("");

  return (
    <HazoUiFlexInput
      input_type="numeric"
      placeholder="Enter price (0-100)..."
      num_min={0}
      num_max={100}
      num_decimals={2}
      format_guide="Enter a number between 0 and 100 with up to 2 decimal places"
      format_guide_info={true}
      value={price}
      onChange={(e) => setPrice(e.target.value)}
    />
  );
}

import { HazoUiFlexInput } from 'hazo_ui';
import { useState } from 'react';

function AgeInput() {
  const [age, setAge] = useState<string>("");

  return (
    <HazoUiFlexInput
      input_type="numeric"
      placeholder="Enter age (1-120)..."
      num_min={1}
      num_max={120}
      num_decimals={0}
      format_guide="Enter a whole number between 1 and 120"
      format_guide_info={true}
      value={age}
      onChange={(e) => setAge(e.target.value)}
    />
  );
}

import { HazoUiFlexInput } from 'hazo_ui';
import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState<string>("");

  return (
    <HazoUiFlexInput
      input_type="alpha"
      placeholder="Enter name (letters only)..."
      format_guide="Only letters and spaces are allowed"
      format_guide_info={true}
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

import { HazoUiFlexInput } from 'hazo_ui';
import { useState } from 'react';

function EmailForm() {
  const [email, setEmail] = useState<string>("");

  return (
    <HazoUiFlexInput
      input_type="email"
      placeholder="Enter email address..."
      format_guide="Enter a valid email address (e.g., user@example.com)"
      format_guide_info={true}
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

import { HazoUiFlexInput } from 'hazo_ui';
import { useState } from 'react';

function UsernameInput() {
  const [username, setUsername] = useState<string>("");

  return (
    <HazoUiFlexInput
      input_type="mixed"
      placeholder="Enter username (5-20 characters)..."
      text_len_min={5}
      text_len_max={20}
      format_guide="Must be between 5 and 20 characters"
      format_guide_info={true}
      value={username}
      onChange={(e) => setUsername(e.target.value)}
    />
  );
}

import { HazoUiFlexInput } from 'hazo_ui';
import { useState } from 'react';

function PhoneInput() {
  const [phone, setPhone] = useState<string>("");

  return (
    <HazoUiFlexInput
      input_type="mixed"
      placeholder="Enter phone number (XXX-XXX-XXXX)..."
      regex={/^\d{3}-\d{3}-\d{4}$/}
      format_guide="Format: XXX-XXX-XXXX (e.g., 123-456-7890)"
      format_guide_info={true}
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
    />
  );
}

import { HazoUiRte, type RteOutput } from 'hazo_ui';
import { useState } from 'react';

function BasicEditor() {
  const [content, setContent] = useState<RteOutput | null>(null);

  return (
    <HazoUiRte
      placeholder="Start typing your content..."
      min_height="200px"
      max_height="400px"
      on_change={(output) => setContent(output)}
    />
  );
}

import { HazoUiRte, type RteOutput, type RteVariable } from 'hazo_ui';
import { useState } from 'react';

function EmailTemplateEditor() {
  const [content, setContent] = useState<RteOutput | null>(null);

  // Define available template variables
  const variables: RteVariable[] = [
    { name: "first_name", description: "Recipient's first name" },
    { name: "last_name", description: "Recipient's last name" },
    { name: "email", description: "Recipient's email address" },
    { name: "company_name", description: "Company name" },
    { name: "order_id", description: "Order ID number" },
    { name: "order_date", description: "Date of order" },
    { name: "total_amount", description: "Total order amount" },
  ];

  // Initial template HTML
  const initialHtml = `
    <h2>Order Confirmation</h2>
    <p>Dear <span data-variable="first_name">{{first_name}}</span>,</p>
    <p>Thank you for your order!</p>
    <p>Order ID: <span data-variable="order_id">{{order_id}}</span></p>
    <p>Total: <span data-variable="total_amount">{{total_amount}}</span></p>
  `;

  return (
    <HazoUiRte
      html={initialHtml}
      variables={variables}
      placeholder="Compose your email template..."
      show_output_viewer={true}
      on_change={(output) => {
        setContent(output);
        console.log('HTML:', output.html);
        console.log('Plain text:', output.plain_text);
      }}
    />
  );
}

import { HazoUiRte, type RteOutput, type RteAttachment } from 'hazo_ui';
import { useState } from 'react';

function EditorWithAttachments() {
  const [content, setContent] = useState<RteOutput | null>(null);

  // Pre-loaded attachments (if any)
  const initialAttachments: RteAttachment[] = [
    {
      filename: "terms.pdf",
      mime_type: "application/pdf",
      data: "JVBERi0xLjQK...", // base64 encoded PDF
    },
  ];

  return (
    <HazoUiRte
      html="<p>Please see the attached document.</p>"
      attachments={initialAttachments}
      on_change={(output) => {
        setContent(output);
        // Access attachments from output
        console.log('Attachments:', output.attachments);
      }}
    />
  );
}

import { HazoUiRte } from 'hazo_ui';

function EditorWithViewer() {
  return (
    <HazoUiRte
      html="<p>Hello <strong>World</strong>!</p>"
      show_output_viewer={true}
      min_height="300px"
    />
  );
}

import { HazoUiRte } from 'hazo_ui';

function ReadOnlyEditor() {
  return (
    <HazoUiRte
      html="<p>This content cannot be edited.</p>"
      disabled={true}
    />
  );
}

import { HazoUiTextbox, type PrefixConfig, type CommandTextOutput } from 'hazo_ui';
import { useState } from 'react';

function MentionInput() {
  const [value, setValue] = useState<string>("");

  // Define available mentions
  const prefixes: PrefixConfig[] = [
    {
      char: "@",
      commands: [
        { action: "john_doe", action_label: "John Doe" },
        { action: "jane_smith", action_label: "Jane Smith" },
        { action: "bob_wilson", action_label: "Bob Wilson" },
      ],
    },
  ];

  const handleChange = (output: CommandTextOutput) => {
    setValue(output.plain_text);
    console.log('Plain text:', output.plain_text);
    console.log('Display text:', output.display_text);
    console.log('Commands:', output.commands);
  };

  return (
    <HazoUiTextbox
      value={value}
      prefixes={prefixes}
      placeholder="Type @ to mention someone..."
      on_change={handleChange}
    />
  );
}

import { HazoUiTextbox, type PrefixConfig } from 'hazo_ui';

function MultiPrefixInput() {
  const prefixes: PrefixConfig[] = [
    {
      char: "@",
      commands: [
        { action: "john", action_label: "John Doe", action_description: "Software Engineer" },
        { action: "jane", action_label: "Jane Smith", action_description: "Product Manager" },
      ],
    },
    {
      char: "#",
      commands: [
        { action: "bug", action_label: "Bug", action_description: "Something is broken" },
        { action: "feature", action_label: "Feature", action_description: "New functionality" },
        { action: "docs", action_label: "Documentation", action_description: "Documentation update" },
      ],
    },
    {
      char: "/",
      commands: [
        { action: "assign", action_label: "Assign", action_description: "Assign to user" },
        { action: "close", action_label: "Close", action_description: "Close this issue" },
        { action: "archive", action_label: "Archive", action_description: "Archive this item" },
      ],
    },
  ];

  return (
    <HazoUiTextbox
      prefixes={prefixes}
      placeholder="Type @, #, or / for commands..."
      on_change={(output) => console.log(output)}
    />
  );
}

import { HazoUiTextbox, type CommandItem, type InsertedCommand } from 'hazo_ui';

function CommandInput() {
  const prefixes = [
    {
      char: "@",
      commands: [
        { action: "alice", action_label: "Alice Johnson" },
        { action: "bob", action_label: "Bob Smith" },
      ],
    },
  ];

  const handleInsert = (command: CommandItem, prefix: string) => {
    console.log(`Inserted ${prefix}${command.action_label}`);
    // Track analytics, send notifications, etc.
  };

  const handleChange = (old_command: InsertedCommand, new_command: CommandItem) => {
    console.log(`Changed from ${old_command.action} to ${new_command.action}`);
    // Update references, notify backend, etc.
  };

  const handleRemove = (command: InsertedCommand) => {
    console.log(`Removed ${command.prefix}${command.action_label}`);
    // Clean up references, update state, etc.
  };

  return (
    <HazoUiTextbox
      prefixes={prefixes}
      placeholder="Mention someone..."
      on_command_insert={handleInsert}
      on_command_change={handleChange}
      on_command_remove={handleRemove}
      on_submit={(output) => console.log('Submitted:', output)}
    />
  );
}

import { HazoUiTextbox } from 'hazo_ui';

function VariantExample() {
  const prefixes = [
    {
      char: "@",
      commands: [{ action: "user", action_label: "Username" }],
    },
  ];

  return (
    <div className="space-y-4">
      {/* Default: Blue background */}
      <HazoUiTextbox
        prefixes={prefixes}
        pill_variant="default"
        placeholder="Default variant (blue)..."
      />

      {/* Outline: Transparent with border */}
      <HazoUiTextbox
        prefixes={prefixes}
        pill_variant="outline"
        placeholder="Outline variant (transparent)..."
      />

      {/* Subtle: Muted background */}
      <HazoUiTextbox
        prefixes={prefixes}
        pill_variant="subtle"
        placeholder="Subtle variant (muted)..."
      />
    </div>
  );
}

import { HazoUiTextarea, type PrefixConfig } from 'hazo_ui';
import { useState } from 'react';

function CommentBox() {
  const [value, setValue] = useState<string>("");

  const prefixes: PrefixConfig[] = [
    {
      char: "@",
      commands: [
        { action: "alice", action_label: "Alice Johnson" },
        { action: "bob", action_label: "Bob Smith" },
      ],
    },
    {
      char: "#",
      commands: [
        { action: "bug", action_label: "Bug" },
        { action: "feature", action_label: "Feature Request" },
      ],
    },
  ];

  return (
    <HazoUiTextarea
      value={value}
      prefixes={prefixes}
      placeholder="Write a comment... (Cmd+Enter to submit)"
      min_height="100px"
      max_height="300px"
      on_change={(output) => setValue(output.plain_text)}
      on_submit={(output) => {
        console.log('Submitting:', output);
        // Submit comment to backend
        setValue(""); // Clear after submit
      }}
    />
  );
}

import { HazoUiTextarea } from 'hazo_ui';

function CustomHeightExample() {
  const prefixes = [
    { char: "@", commands: [{ action: "user", action_label: "User" }] },
  ];

  return (
    <div className="space-y-4">
      {/* Using rows */}
      <HazoUiTextarea
        prefixes={prefixes}
        rows={3}
        placeholder="3 rows tall..."
      />

      {/* Using min/max height */}
      <HazoUiTextarea
        prefixes={prefixes}
        min_height="120px"
        max_height="400px"
        placeholder="Custom height..."
      />
    </div>
  );
}

import { HazoUiConfirmDialog } from 'hazo_ui';

// Destructive confirmation with two buttons
<HazoUiConfirmDialog
  open={showClear}
  onOpenChange={setShowClear}
  variant="destructive"
  title="Clear Form Data"
  description="This will permanently delete all uploaded files and reset the status. This action cannot be undone."
  confirmLabel="Yes, clear everything"
  onConfirm={handleClear}
/>

// OK-only acknowledgment
<HazoUiConfirmDialog
  open={showSuccess}
  onOpenChange={setShowSuccess}
  variant="info"
  title="Upload Complete"
  description="Your files have been uploaded successfully."
  showCancelButton={false}
  onConfirm={() => setShowSuccess(false)}
/>

// Async with auto-loading spinner
<HazoUiConfirmDialog
  open={showDelete}
  onOpenChange={setShowDelete}
  variant="destructive"
  title="Delete Account"
  description="This will permanently delete your account."
  confirmLabel="Delete My Account"
  onConfirm={async () => {
    await deleteAccount();
    // dialog auto-closes on resolve
  }}
/>

// Custom children content
<HazoUiConfirmDialog
  open={showConfirm}
  onOpenChange={setShowConfirm}
  title="Confirm Submission"
  onConfirm={handleSubmit}
>
  <div>
    <p>You are about to submit:</p>
    <ul>
      <li>3 documents</li>
      <li>2 images</li>
    </ul>
  </div>
</HazoUiConfirmDialog>

<HazoUiConfirmDialog
  accentColor="#7c3aed"
  confirmButtonColor="#7c3aed"
  title="Custom Styled"
  description="Purple accent and button colors."
  onConfirm={handleConfirm}
  open={open}
  onOpenChange={setOpen}
/>

import { HazoUiDialog } from 'hazo_ui';
import { useState } from 'react';

function ConfirmDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Open Dialog
      </button>

      <HazoUiDialog
        open={isOpen}
        onOpenChange={setIsOpen}
        title="Confirm Action"
        description="Are you sure you want to proceed?"
        onConfirm={() => {
          console.log('Confirmed');
          setIsOpen(false);
        }}
        onCancel={() => {
          console.log('Cancelled');
        }}
      >
        <p>This action cannot be undone.</p>
      </HazoUiDialog>
    </>
  );
}

import {
  HazoUiDialogRoot,
  HazoUiDialogContent,
  HazoUiDialogHeader,
  HazoUiDialogTitle,
  HazoUiDialogDescription,
  HazoUiDialogFooter,
} from 'hazo_ui';
import { useState } from 'react';
import { User } from 'lucide-react';

function ClientDetailsDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('personal');

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Open Client Details
      </button>

      <HazoUiDialogRoot open={isOpen} onOpenChange={setIsOpen}>
        <HazoUiDialogContent className="sm:max-w-2xl w-[90vw] h-[80vh] flex flex-col p-0">
          {/* Custom Header with Avatar */}
          <HazoUiDialogHeader className="bg-navbar text-navbar-foreground p-6 rounded-t-lg">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
                <User className="h-6 w-6 text-primary-foreground" />
              </div>
              <div>
                <HazoUiDialogTitle className="text-white text-left">
                  John Doe
                </HazoUiDialogTitle>
                <HazoUiDialogDescription className="text-white/80 text-left">
                  john.doe@example.com
                </HazoUiDialogDescription>
              </div>
            </div>
          </HazoUiDialogHeader>

          {/* Tabs Navigation */}
          <div className="border-b px-6">
            <div className="flex gap-4">
              <button
                onClick={() => setActiveTab('personal')}
                className={`py-3 px-1 text-sm font-medium border-b-2 ${
                  activeTab === 'personal'
                    ? 'border-primary text-primary'
                    : 'border-transparent text-muted-foreground'
                }`}
              >
                Personal
              </button>
              <button
                onClick={() => setActiveTab('address')}
                className={`py-3 px-1 text-sm font-medium border-b-2 ${
                  activeTab === 'address'
                    ? 'border-primary text-primary'
                    : 'border-transparent text-muted-foreground'
                }`}
              >
                Address
              </button>
              <button
                onClick={() => setActiveTab('contact')}
                className={`py-3 px-1 text-sm font-medium border-b-2 ${
                  activeTab === 'contact'
                    ? 'border-primary text-primary'
                    : 'border-transparent text-muted-foreground'
                }`}
              >
                Contact
              </button>
            </div>
          </div>

          {/* Scrollable Tab Content */}
          <div className="flex-1 overflow-y-auto p-6">
            {activeTab === 'personal' && (
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium">Full Name</label>
                  <input
                    type="text"
                    className="w-full px-3 py-2 border rounded-md mt-1"
                  />
                </div>
                {/* More personal fields */}
              </div>
            )}
            {activeTab === 'address' && (
              <div className="space-y-4">
                {/* Address fields */}
              </div>
            )}
            {activeTab === 'contact' && (
              <div className="space-y-4">
                {/* Contact fields */}
              </div>
            )}
          </div>

          {/* Footer */}
          <HazoUiDialogFooter className="p-6 border-t">
            <button
              onClick={() => setIsOpen(false)}
              className="px-4 py-2 border rounded-md hover:bg-accent"
            >
              Cancel
            </button>
            <button
              onClick={() => setIsOpen(false)}
              className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
            >
              Save Changes
            </button>
          </HazoUiDialogFooter>
        </HazoUiDialogContent>
      </HazoUiDialogRoot>
    </>
  );
}

import {
  HazoUiDialogRoot,        // Root dialog container (replaces Dialog)
  HazoUiDialogTrigger,     // Trigger button (optional)
  HazoUiDialogContent,     // Dialog content wrapper
  HazoUiDialogHeader,      // Header section
  HazoUiDialogTitle,       // Title text
  HazoUiDialogDescription, // Description text
  HazoUiDialogFooter,      // Footer section
  HazoUiDialogPortal,      // Portal wrapper
  HazoUiDialogOverlay,     // Backdrop overlay
  HazoUiDialogClose,       // Close button
} from 'hazo_ui';

import { HazoUiDialog } from 'hazo_ui';
import { useState } from 'react';

function SaveFormDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

  const handleSave = async () => {
    setIsSaving(true);
    try {
      await saveFormData();
      setIsOpen(false);
    } catch (error) {
      console.error('Save failed:', error);
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <HazoUiDialog
      open={isOpen}
      onOpenChange={setIsOpen}
      title="Save Changes"
      description="Your changes will be saved to the server."
      actionButtonText={isSaving ? "Saving..." : "Save"}
      actionButtonLoading={isSaving}
      onConfirm={handleSave}
    >
      <p>Click Save to see the loading spinner and disabled button.</p>
    </HazoUiDialog>
  );
}

import { HazoUiDialog } from 'hazo_ui';
import { Send } from 'lucide-react';
import { useState } from 'react';

function SendEmailDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <HazoUiDialog
      open={isOpen}
      onOpenChange={setIsOpen}
      title="Send Email"
      description="This will send the email to all recipients."
      actionButtonText="Send Email"
      actionButtonIcon={<Send className="h-4 w-4" />}
      onConfirm={() => {
        sendEmail();
        setIsOpen(false);
      }}
    >
      <p>The Send icon appears before the button text.</p>
    </HazoUiDialog>
  );
}

import { HazoUiDialog } from 'hazo_ui';
import { Lock } from 'lucide-react';
import { useState } from 'react';

function CloseAccountDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const [isClosing, setIsClosing] = useState(false);

  const handleClose = async () => {
    setIsClosing(true);
    try {
      await closeAccount();
      setIsOpen(false);
    } catch (error) {
      console.error('Close failed:', error);
    } finally {
      setIsClosing(false);
    }
  };

  return (
    <HazoUiDialog
      open={isOpen}
      onOpenChange={setIsOpen}
      title="Close Account"
      description="This will permanently close your account."
      actionButtonText={isClosing ? "Closing..." : "Close"}
      actionButtonIcon={<Lock className="h-4 w-4" />}
      actionButtonLoading={isClosing}
      onConfirm={handleClose}
    >
      <p>Lock icon is replaced by spinner when loading.</p>
    </HazoUiDialog>
  );
}