lti-web-client/src/components/helper/StatusBadge.tsx

import { ReactNode } from 'react';

import Badge from '@/components/Badge';

import { cn } from '@/lib/helper';
import { Color } from '@/types/theme';

interface StatusBadgeProps {
  color: Color;
  text: ReactNode;
  className?: {
    badge?: string;
    status?: string;
  };
  onClick?: () => void;
}

const StatusBadge = ({
  color = 'neutral',
  text,
  className,
  onClick,
}: StatusBadgeProps) => {
  return (
    <Badge
      variant='soft'
      onClick={onClick}
      className={{
        badge: cn(
          'px-2 py-1 w-full flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content',
          {
            'bg-base-content/5': color === 'neutral',
            'bg-success/30': color === 'success',
            'bg-error/20': color === 'error',
            'bg-primary/20': color === 'info',
            'bg-[#FF9A20]/12': color === 'warning',
            'bg-[#1166EF]/12': color === 'primary',
          },
          className?.badge
        ),
        status: cn(className?.status),
      }}
      color={color}
    >
      <svg
        height='12'
        width='12'
        xmlns='http://www.w3.org/2000/svg'
        className={cn({
          'text-base-content/10': color === 'neutral',
          'text-[#008000]': color === 'success',
          'text-error': color === 'error',
          'text-primary': color === 'info',
          'text-[#FF9A20]': color === 'warning',
          'text-[#1166EF]': color === 'primary',
        })}
      >
        <circle r='6' cx='6' cy='6' fill='currentColor' />
      </svg>

      {text}
    </Badge>
  );
};

export default StatusBadge;