import { JSX, ParentComponent, splitProps } from "solid-js";

interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {
  variant?: "default" | "secondary" | "outline" | "success" | "warning" | "error";
  size?: "sm" | "md";
}

export const Badge: ParentComponent<BadgeProps> = (props) => {
  const [local, rest] = splitProps(props, [
    "variant",
    "size",
    "children",
    "class",
  ]);

  const variantClasses = {
    default: "bg-accent-subtle text-accent border-transparent",
    secondary: "bg-canvas-muted text-ink-muted border-transparent",
    outline: "bg-transparent text-ink-muted border-border",
    success: "bg-[hsl(var(--success-subtle))] text-[hsl(var(--success))] border-transparent",
    warning: "bg-[hsl(var(--warning-subtle))] text-[hsl(var(--warning))] border-transparent",
    error: "bg-[hsl(var(--error-subtle))] text-[hsl(var(--error))] border-transparent",
  };

  const sizeClasses = {
    sm: "px-2 py-0.5 text-xs",
    md: "px-2.5 py-1 text-sm",
  };

  const baseClasses = [
    "inline-flex items-center gap-1.5 rounded-full font-display font-medium border transition-colors",
    variantClasses[local.variant || "default"],
    sizeClasses[local.size || "md"],
    local.class || "",
  ].join(" ");

  return (
    <span {...rest} class={baseClasses}>
      {local.children}
    </span>
  );
};
