import { cn } from './utils';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import type { HTMLAttributes, PropsWithChildren } from 'react';
import { forwardRef } from 'react';

const variants = cva('mr-2 rounded-md px-2.5 py-0.5 text-xs font-medium w-fit', {
  defaultVariants: {
    color: 'default',
  },
  variants: {
    color: {
      default: 'bg-blue-100 text-blue-800',
      green: 'bg-green-100 text-green-800',
      indigo: 'bg-indigo-100 text-indigo-800',
      pink: 'bg-pink-100 text-pink-800',
      purple: 'bg-purple-100 text-purple-800',
      red: 'bg-red-100 text-red-80',
      yellow: 'bg-yellow-100 text-yellow-800',
    },
  },
});

export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
  VariantProps<typeof variants> &
  PropsWithChildren;

export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  ({ children, className, color, ...props }, ref) => (
    <span className={cn(variants({ className, color }))} {...props} ref={ref}>
      {children}
    </span>
  )
);