Iconography

'use client';
import { Icon, type IconSize } from '@mbsw/ui';
import { Search } from 'lucide-react';

export default function Demo() {
  const settings = {
    "showText": true,
    "size": "md",
    "position": "inline-start",
    "decorative": false
  };
  const icon = (
    <Icon
      icon={Search}
      size={settings.size as IconSize}
      position={
        settings.showText
          ? (settings.position as 'inline-start' | 'inline-end')
          : undefined
      }
      {...(settings.decorative
        ? { decorative: true as const }
        : { decorative: false as const, label: "Search" })}
    />
  );
  if (!settings.showText) return icon;
  return (
    <span
      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem' }}
    >
      {settings.position === 'inline-start' && icon}
      <span>{"Text"}</span>
      {settings.position === 'inline-end' && icon}
    </span>
  );
}