import type { HTMLAttributes, ReactNode } from "react";

export type PillProps = Omit<HTMLAttributes<HTMLSpanElement>, "className"> & {
  children: ReactNode;
  className?: string;
  size?: "sm" | "md";
  weight?: "medium" | "semibold" | "none";
  inlineFlex?: boolean;
};

export function Pill({
  children,
  className = "",
  size = "md",
  weight = "medium",
  inlineFlex = false,
  ...rest
}: PillProps) {
  return (
    <span
      className={[
        "rounded-full break-keep",
        inlineFlex && "inline-flex items-center",
        size === "sm" ? "px-2 py-1" : "px-3 py-1",
        weight === "semibold" ? "font-semibold" : weight === "medium" ? "font-medium" : "",
        "label-12",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      {...rest}
    >
      {/* 배경·테두리는 바깥 span, WebKit 글자 채움은 안쪽만 solid-text-paint */}
      <span className="solid-text-paint">{children}</span>
    </span>
  );
}