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

'use client';

import { HTMLAttributes, ReactNode } from 'react';

import { cn } from '@/lib/helper';
import type { Color, Variant, Size } from '@/types/theme';

export interface BadgeProps
  extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
  children?: ReactNode;
  className?: {
    badge?: string;
    status?: string;
  };
  statusIndicator?: boolean;
  variant?: Variant;
  color?: Color;
  size?: Size;
}

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

    const variantClasses: Record<Variant, string> = {
      default: '',
      outline: 'badge-outline',
      ghost: 'badge-ghost',
      soft: 'badge-soft',
      dash: 'badge-dash',
    };

    const colorClasses: Record<Color, string> = {
      neutral: 'badge-neutral',
      primary: 'badge-primary',
      secondary: 'badge-secondary',
      accent: 'badge-accent',
      info: 'badge-info',
      success: 'badge-success',
      warning: 'badge-warning',
      error: 'badge-error',
      none: '',
    };

    const sizeClasses: Record<Size, string> = {
      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
    );
  };

  const getStatusClasses = () => {
    if (!statusIndicator) return '';

    const statusIndicatorClasses: Record<Color, string> = {
      neutral: 'bg-neutral',
      primary: 'bg-primary',
      secondary: 'bg-secondary',
      accent: 'bg-accent',
      info: 'bg-info',
      success: 'bg-success',
      warning: 'bg-warning',
      error: 'bg-error',
      none: '',
    };

    return cn(
      'w-2.5 h-2.5 rounded-full',
      color && statusIndicatorClasses[color],
      className?.status
    );
  };

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

export default Badge;