import type { VariantProps } from "@karma/cva";
import { cva, cx } from "@karma/cva";
import * as React from "react";

const badgeVariants = cva({
  base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",

  variants: {
    variant: {
      accent: "hover:bg-accent/50 border-transparent bg-accent text-secondary",
      primary:
        "hover:bg-background/90 border-transparent bg-background text-primary",
      outline:
        "border border-accent text-primary hover:bg-accent hover:text-background",
      muted: "hover:bg-muted/80 border-transparent bg-muted text-secondary",
    },
  },
  defaultVariants: {
    variant: "primary",
  },
});

export type BadgeProps = React.HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof badgeVariants>;

export const Badge = ({ className, variant, ...props }: BadgeProps) => {
  return (
    <div className={cx(badgeVariants({ variant }), className)} {...props} />
  );
};