Button

'use client';
import {
  Button,
  type ButtonVariant,
  type ButtonTone,
  type ButtonSize,
  type IconOnlyButtonSize,
} from '@mbsw/ui';
import { Plus, ArrowRight } from 'lucide-react';
export default function Demo() {
  const settings = {
    "iconOnly": false,
    "leadingIcon": false,
    "trailingIcon": false,
    "label": "Text",
    "variant": "solid",
    "tone": "primary",
    "size": "md",
    "disabled": false,
    "generating": false
  };
  const common = {
    variant: settings.variant as ButtonVariant,
    tone: settings.tone as ButtonTone,
    disabled: settings.disabled,
    generating: settings.generating,
  };
  return (
    <>
      {settings.iconOnly ? (
        <Button
          {...common}
          iconOnly
          icon={Plus}
          size={settings.size as IconOnlyButtonSize}
          aria-label={settings.label || "Text"}
        />
      ) : (
        <Button
          {...common}
          size={(settings.size === 'xs' ? 'sm' : settings.size) as ButtonSize}
          leadingIcon={settings.leadingIcon ? Plus : undefined}
          trailingIcon={settings.trailingIcon ? ArrowRight : undefined}
        >
          {settings.label || "Text"}
        </Button>
      )}
    </>
  );
}