import { FormDialog, FormField, FormRow, FormSection } from "@/components/ui/form-dialog";

<FormDialog
  open={isOpen}
  onOpenChange={setIsOpen}
  title="Add New Customer"
  description="Enter customer details below"
  onSubmit={handleSubmit}
  submitLabel="Create"
  isSubmitting={isLoading}
  size="lg"
>
  <FormSection title="Contact Information">
    <FormRow>
      <FormField label="First Name" required>
        <Input value={firstName} onChange={...} />
      </FormField>
      <FormField label="Last Name" required>
        <Input value={lastName} onChange={...} />
      </FormField>
    </FormRow>
  </FormSection>
</FormDialog>

// Light and dark mode colors
className="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700"

// Text colors
className="text-zinc-900 dark:text-zinc-100"

interface CustomerCardProps {
  customer: Customer;
  onEdit?: (id: string) => void;
  showActions?: boolean;
}

export function CustomerCard({ customer, onEdit, showActions = true }: CustomerCardProps) {
  // ...
}