/**
 * The square mark that stands for a product wherever one is listed.
 *
 * Its own module rather than a piece of `product-home-parts.tsx` because the
 * Administrator card's app picker draws it too, and importing it from the parts
 * file would close a cycle: the parts file renders the picker.
 */

import type { Product } from "@/contexts/product-context"
import {
  PRODUCT_TILE_CLASS,
  PRODUCT_TILE_SIZES,
  productTileStyle,
  type ProductTileSize,
} from "@/lib/product-glyph"
import { ProductTileArt } from "@/components/product-app-mark"
import { cn } from "@/lib/utils"

/**
 * Square mark tile for launcher cards — the switcher row's footprint at `md`.
 *
 * `lg` exists for the More from Exxat card, where the mark heads its own column
 * beside a title and a two-line tagline. The size is one prop rather than a
 * `className` the caller sizes by hand because the art inside has to grow with the
 * tile: a bigger tile alone is the coverage problem in `PRODUCT_TILE_SIZES`.
 *
 * Takes the two fields it draws rather than a whole `ProductHomeCard`, so an
 * app named in a menu (`AdminAppTarget`) wears the same mark as its own card.
 */
export function ProductMarkTile({
  card,
  className,
  size = "md",
  glyphOnly = false,
}: {
  card: { product: Product; brandColor: string }
  className?: string
  size?: ProductTileSize
  /** Campus home — solid Font Awesome on brand tiles, no drawn SVG marks. */
  glyphOnly?: boolean
}) {
  return (
    <span
      aria-hidden
      // The mark is white on the brand colour at a measured 3:1, so the tile
      // keeps its ink inside rows that repaint their descendants when
      // highlighted. See `DropdownMenuItem` in the package.
      data-fixed-ink=""
      style={productTileStyle(card.brandColor)}
      className={cn(
        PRODUCT_TILE_CLASS,
        size !== "md" && PRODUCT_TILE_SIZES[size].footprint,
        className,
      )}
    >
      <ProductTileArt product={card.product} size={size} glyphOnly={glyphOnly} />
    </span>
  )
}