Price tag

import { cva, type VariantProps } from 'class-variance-authority';
import type * as React from 'react';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

const priceVariants = cva(
  'inline-flex h-11 shrink-0 select-none items-center gap-2 rounded-menu px-3 font-menu text-menu-figure tabular-nums [&_svg]:size-5',
  {
    variants: {
      variant: {
        /** Money the player has: the one place a menu wears the accent as a fill. */
        accent: 'bg-primary text-primary-foreground',
        inverse: 'bg-foreground text-background',
        block: 'menu-block text-foreground text-hud',
      },
    },
    defaultVariants: { variant: 'accent' },
  },
);

export type PriceTagProps = React.ComponentProps<'span'> &
  VariantProps<typeof priceVariants> & {
    /** Wallet, bank, chip — what the figure is. */
    icon?: React.ReactNode;
  };

/** A figure in a solid block: the cash and the bank in a shop's corner, a price on a row. */
function PriceTag({ icon, variant, className, children, ...props }: PriceTagProps) {
  return (
    <span data-slot="price-tag" className={cn(priceVariants({ variant }), className)} {...props}>
      {icon}
      {children}
    </span>
  );
}

export { PriceTag, priceVariants };