import { toAbbreviation } from '@/patterns/toAbbreviation';
import { toEllipsis } from '@/patterns/toEllipsis';
import * as React from 'react';
import { BaseBadge, type BaseBadgeProps, baseBadgeVariants } from './BaseBadge';

import { cn } from '@/utils';

import styles from './Badge.module.css';

export type BadgeProps = BaseBadgeProps & {
  icon?: React.ReactNode;
};

export const badgeVariants = baseBadgeVariants;

export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
  ({ className, variant, children, icon, ...props }, ref) => {
    return (
      <BaseBadge
        ref={ref}
        className={cn(styles.Badge, badgeVariants, className)}
        variant={variant}
        {...props}
      >
        {icon && <div className={styles.Icon}>{icon}</div>}
        {typeof children === 'string' &&
          (variant === 'address'
            ? toAbbreviation(children)
            : toEllipsis(children, 18))}
      </BaseBadge>
    );
  },
);
