lti-web-client/src/components/Badge.tsx

'use client';

import { HTMLAttributes, ReactNode } from 'react';

import { cn } from '@/lib/helper';

export interface BadgeProps
  extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
  children?: ReactNode;
  className?: {
    badge?: string;
  };
  variant?: 'default' | 'outline' | 'ghost' | 'soft' | 'dash';
  color?:
    | 'neutral'
    | 'primary'
    | 'secondary'
    | 'accent'
    | 'info'
    | 'success'
    | 'warning'
    | 'error';
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
}

const Badge = ({
  children,
  className,
  variant = 'default',
  color,
  size = 'md',
  ...props
}: BadgeProps) => {
  const getBadgeClasses = () => {
    const baseClasses = 'badge';

    const variantClasses = {
      default: '',
      outline: 'badge-outline',
      ghost: 'badge-ghost',
      soft: 'badge-soft',
      dash: 'badge-dash',
    };

    const colorClasses = {
      neutral: 'badge-neutral',
      primary: 'badge-primary',
      secondary: 'badge-secondary',
      accent: 'badge-accent',
      info: 'badge-info',
      success: 'badge-success',
      warning: 'badge-warning',
      error: 'badge-error',
    };

    const sizeClasses = {
      xs: 'badge-xs',
      sm: 'badge-sm',
      md: 'badge-md',
      lg: 'badge-lg',
      xl: 'badge-xl',
    };

    return cn(
      baseClasses,
      variantClasses[variant],
      color && colorClasses[color],
      sizeClasses[size],
      className?.badge
    );
  };

  return (
    <span className={getBadgeClasses()} {...props}>
      {children}
    </span>
  );
};

export default Badge;