import type { HTMLAttributes, ReactNode } from 'react';
import { cx } from '../_internal/cx';

export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
  /** `blue` = filled brand-blue chip for the highlighted offer; `neutral` = light-gray chip with muted text. */
  tone?: 'blue' | 'neutral';
  /** Short uppercase label, one to three words, e.g. "Dieses Angebot". */
  children: ReactNode;
}

/**
 * Small uppercase label chip (`.kwac-offer-chip`). Sits at the top of an
 * `OfferCard`; `tone="blue"` marks the offer the listing is about, `tone="neutral"`
 * marks alternatives. Text is rendered uppercase with wide tracking by CSS.
 */
export function Chip({ tone = 'blue', className, children, ...rest }: ChipProps) {
  return (
    <span className={cx('kwac-offer-chip', tone === 'neutral' && 'kwac-offer-chip-alt', className)} {...rest}>
      {children}
    </span>
  );
}