import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

type HeroBadgeProps = {
  children: ReactNode;
  className?: string;
  trailing?: ReactNode;
};

export function HeroBadge({ children, className, trailing }: HeroBadgeProps) {
  return (
    <p
      className={cn(
        "inline-flex items-center gap-1.5 rounded-pill border border-border/70 bg-background/75 px-3 py-1 text-[0.84rem] font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome sm:px-3.5 sm:py-1 sm:text-[0.9rem]",
        className,
      )}
    >
      <span>{children}</span>
      {trailing}
    </p>
  );
}