pocket-pascal/client/src/lib/chipStyle.ts

import type { CSSProperties } from "react"

import { categoryDotColor } from "@/lib/catalog"
import type { CategoryId, TagType } from "@/types/domain"

/**
 * C1: Category = soft tint only (no solid border).
 * C2: caution = dashed warning border. No pick ring on chips.
 */
export function categoryChipSurface(cat: CategoryId | undefined): CSSProperties {
  if (!cat) {
    return {
      background: "var(--glass-fill)",
      borderWidth: 0,
      borderStyle: "none",
    }
  }

  const token = categoryDotColor(cat)
  return {
    background: `color-mix(in srgb, ${token} 15%, white)`,
    borderWidth: 0,
    borderStyle: "none",
  }
}

export function chipTagModifiers(tag: TagType | undefined): {
  className: string
  style: CSSProperties
} {
  if (tag === "caution") {
    return {
      className: "",
      style: {
        borderWidth: 1.5,
        borderStyle: "dashed",
        borderColor: "var(--signal-warning)",
      },
    }
  }
  return { className: "", style: {} }
}

/** Screen-reader label when pick/caution is ring/border-only. */
export function chipAriaLabel(
  name: string,
  tag: TagType | undefined,
  pickLabel: string,
  cautionLabel: string,
): string {
  if (tag === "pick") return `${name} — ${pickLabel}`
  if (tag === "caution") return `${name} — ${cautionLabel}`
  return name
}