Badge

'use client';
import { Badge, Icon, type BadgeSize, type BadgeShape } from '@mbsw/ui';
import { Plus, ChevronDown } from 'lucide-react';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "trailingIcon": false,
    "label": "텍스트",
    "backgroundColor": "#5d4ff9",
    "textColor": "#ffffff",
    "size": "md",
    "shape": "square"
  };
  return (
    <Badge
      size={settings.size as BadgeSize}
      shape={settings.shape as BadgeShape}
      style={{
        backgroundColor: settings.backgroundColor,
        color: settings.textColor,
      }}
    >
      {settings.leadingIcon && (
        <Icon
          icon={Plus}
          size={settings.size === 'sm' ? '2xs' : 'xs'}
          position="inline-start"
          decorative
        />
      )}
      {settings.label}
      {settings.trailingIcon && (
        <Icon
          icon={ChevronDown}
          size={settings.size === 'sm' ? '2xs' : 'xs'}
          position="inline-end"
          decorative
        />
      )}
    </Badge>
  );
}